如何使用flex做平均布局和垂直居中的? |
您所在的位置:网站首页 › css水平两端对齐 › 如何使用flex做平均布局和垂直居中的? |
本文主要对flex进行介绍,以及日常工作中涉及到的flex使用场景。 目录如下: 1. flex的介绍 2. 用法一:flex做平均布局 3. 用法二:flex做垂直居中 4. 用法三:flex做响应式布局 1.flex介绍 1.介绍 W3C提出了一种新的解决方案:flex布局,flex是flexible Box的缩写,即弹性布局,flex中父元素的叫容器container(下图中包裹三个1的外层div),子元素叫做item项目(下面的每个1叫做item),一定要区分这俩概念1. order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0 .item { order: ; }2. flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 .item { flex-grow: ; /* default 0 */ }3. flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 .item { flex-shrink: ; /* default 1 */ }4. flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 .item { flex-basis: | auto; /* default auto */ }5. flex属性是flex-grow, flex-shrink 和flex-basis的简写,默认值为0 1 auto。后两个属性可选。 .item { flex: none | [ ? || ] }6. align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 2.最近需求里面涉及到平均布局,现在在这里总结一下:想做一个这样的布局: 涉及到三层div:父div,五个子div,中间加一层x的div,flex,中间一层div加个负margin,实现一个平局布局且又可以换行 HTML部分 JS BinCSS部分 *{box-sizing:border-box;padding:0;margin:0;} .parent{ width:802px; margin-left:auto; margin-right:auto; margin-top:10px; border:1px solid red; } .parent>.x{ display:flex; flex-wrap:wrap; margin-right:-6px; margin-left:-6px; } .parent>.x>.child{ width:191px; height:191px; background:grey; border:1px solid blue; margin-right:6px; margin-left:6px; margin-bottom:10px; }想要实现一个如下的效果 代码部分: HTML: flex实现垂直居中 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 *{box-sizing:border-box;margin:0;padding:0;} .parent{ display:flex; justify-content:center; align-items:center; height:600px; border:1px solid red; } .child{ border:3px solid green; width:300px; }最终效果: 效果如下: 九宫格图片会随着屏幕宽度而变化! 实现代码如下: HTML flex做响应式布局CSS *{ box-sizing:border-box; padding:0; margin:0; } .parent{ display:flex; flex-wrap:wrap; } .child{ background:red; width:calc(100% / 3); height:100px; border:1px solid black; } |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |