flex弹性布局

Posted 2022-02-21 老张在线敲代码

什么是flex

felxbox布局是用来进行弹性布局，可以适配rem处理尺寸的适配问题

优点：

任何一个容器都可以指定为flex布局，比较灵活

更加符合响应式布局的特点

缺点：

浏览器兼容性不高，只兼容ie9以上浏览器

0

flex-direction

作用：子元素在父元素盒子中的排列方式

属性：
row是默认值，从左到右排列
row-reverse与row相反，从右往左
column将子元素垂直显示，默认从上往下
column-reverse与column相反，从下往上

flex-warp

作用:子元素在父元素盒子中是否换行

属性：
nowrap默认值，不换行或者不换列
warp换行或者换列
wrap-reverse换行或换列，但是是以相反的方向

flex-flow

作用：结合上面俩个属性的特性
示例：flex-flow：row wrap（x轴排列且换行）

justify–content

作用：均匀分布子元素在父元素内部的所占空间

属性：
flex-start默认值，从左到右，第一个子元素挨着行的开头
flex-end与上面相反
center居中显示
space-between平均分布在该行上，俩边不留空间
space-around平均分布在该行上，俩边留有子元素一半的空间

align-items

作用：设置每一个flex元素在交叉轴上的对齐方式（如果主轴是x则交叉轴是y，如果主轴是y则正好相反）

属性：
flex-start位于容器的开头
flex-end位于容器的末尾
center居中显示

align-content

作用：把多行的元素当成整体进行操作

属性：
flex-start位于容器的开头
flex-end位于容器的末尾
center居中对齐
space-between之间留空白，俩边紧贴
space-around俩端也留有空白