flex布局

flex布局 Flexible box (弹性盒子)

flex 布局， 不会去菜鸟教程 w3c查找

display :flex

• 给父盒子添加 ，控制子盒子 ，不用清除浮动以及 浮动

flex-direction

• 默认row x 轴 column y轴

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

• center 居中 space-between 先贴两边，再分配剩余空间
• 可以解决块级盒子垂直居中问题

flex-wrap

• flex 布局 ， 默认子元素不换行。 当一行上不能显示所有盒子，会改变盒子大小，需要 flex-wrap 来取消变小，将子元素换行显示
• flex-wrap:wrap;

align-items 设置侧轴排列方式(单行) 和 justify-content 相似

• flex-start 默认从上到下
• center 垂直居中
• stretch 拉伸 (用的少)

提示 默认主轴为x轴 ，当设置x 轴 为侧轴时 ，align-items 调整的是 x 轴上的 子盒子的位置 同理 justify-content 也是这样

多行侧轴调整 align-content

• center 居中
• flex-start

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

• 可以简写 flex-flow:row wrap;

小结

• 1. 父元素 添加 display：flex ；
• 2. 调主轴 flex-direction x = row y = column
• 3. 调主轴 侧轴（单行）的排列方式 justify-content align-items ;
• 4. 令子元素可以自动换行 flex-wrap：wrap ；
• 5. 多行侧轴调整 align-content：center space-between