CSS布局之弹性布局

什么是Flex

Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，通过给元素设置display属性，属性值为flex或者inline-flex。使其变成弹性容器，容器中的直系子元素就会变为弹性元素。

 

怎么设置弹性布局

div{

              display: flex;//变成弹性盒

       }

布局父项常见属性

1.flex-direction：设置主轴的方向

row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴沿垂直方向从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

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

flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-betwee	两端对齐，项目之间的间隔是相等的
space-around	每个项目两侧的间隔相等
initial	将此属性设置为属性的默认值

3.flex-wrap：设置子元素是否换行

nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

4.align-items：设置侧轴上的子元素排列方式（单行）

stretch	默认值，项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部

5.align-content：设置侧轴上的子元素的排列方式（多行）

stretch	默认值，将项目拉伸以占据剩余空间
center	项目在容器内居中排布
flex-start	项目在容器的顶部排列
flex-end	项目在容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等

6.flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

布局子项常见属性

 1.flex子项目占的份数

2.align-self控制子项自己在侧轴的排列方式

auto	默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch	项目将被拉伸以适合容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

3.order属性定义子项的排序顺序（前后顺序）