flex布局

flex布局父项常见的属性

flex-direction:设置主轴的方向

属性值 说明
row 默认值从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

给父级添加flex属性。默认的主轴是x轴,row。剩下的就是侧轴。而我们的子元素就是跟着主轴来排列的。

justify-content:设置主轴上的子元素的排列方式

justify-content属性定义了项目在主轴上的对齐方式。注意:在使用这个属性之前一定先确定好主轴是哪个??

属性值 说明
flex-start 默认值,从头部开始,如果主轴是x轴,则从左到右
flext-end 从尾部开始排列
center 在主轴居中对齐(如果主轴是x轴,则水平居中)
sapce-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间(重要)

flex-wrap:设置子元素是否换行。

属性值 说明
nowrap 默认值,不换行
wrap 换行

align-items:设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴)上的排列方式,在子项为单项(单行)的时候使用。

属性值 说明
flex-start 从上到下
flex-end 从下到上
center 挤在一起(垂直居中)
stretch 拉伸(默认值)

aligin-content:设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)。在单行下是没有效果的。

属性值 说明
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴的中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元素高度

flex-flow:是flex-direction和flex-wrap属性的合写。复合属性。

总结:

flex-direction:设置主轴的方向

justify-content:设置主轴上的子元素的排列方式

flex-wrap:设置子元素是否换行

align-items:设置侧轴上的子元素排列方式(单行)

align-content:设置侧轴上的子元素的排列方式(多行)

flex-flow:复合属性,flex-direction和flex-wrap的合写。

上一篇:Flex布局(弹性盒子)


下一篇:CSS布局1.0