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;
小结
-
- 父元素 添加 display:flex ;
-
- 调主轴 flex-direction x = row y = column
-
- 调主轴 侧轴(单行)的排列方式 justify-content align-items ;
-
- 令子元素可以自动换行 flex-wrap:wrap ;
-
- 多行侧轴调整 align-content:center space-between