flex 弹性布局。任何容器都可指定为 flex布局。
当父盒子设置为 flex 之后,子元素的float、clear和 vertical-align 属性将失效。
父元素添加 display:flex;变为flex容器。它的子元素称为容器成员,称为flex项目。
原理:通过给父盒子添加 flex属性,控制子盒子的位置以及排列方式。
flex常见父项属性
flex-dircetion: 设置主轴方向;
justify-content: 设置主轴子元素排列方式
( flex-start相当于left,end相当于 right )
flex-wrap: 设置子元素是否换行
( flex中默认子元素不换行,若装不开则缩小子元素宽度,仍挤在父元素里面。)
align-content: 设置侧轴上子元素排列方式(多行元素);(应先设置flex-wrap:wrap;)
align-items: 设置侧轴上子元素排列方式(单行元素);
flex-flow: 复合属性,相当于同时设置了flex-direction 和 flex-wrap
flex-flow:column wrap; // y轴为主轴,换行
flx常见子项属性
- flex子项目分配剩余空间,表示占的份数
flex: number;// 默认为0, 1表示 该子元素占1份..
等分 让所有子元素添加 flex:1 即可。
(圣杯布局:父容器flex,盒子1固定宽,盒子2 flex:1,盒子3固定宽)
- align-self 控制子项自己在侧轴的排列方式
align-self 允许单个子项目和其他项目不一样的对齐方式,可覆盖 align-items属性。
默认为auto,表示继承父元素
- order属性定义子项排列顺序(前后顺序)
order:number; // 默认为0,若想提前则可写为-1