是什么:
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。优点:
flex布局也叫弹性布局,可以简便、完整、响应式地实现各种页面布局注意:
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。常用属性:
flex-direction:设置主轴的方向
- row 默认值从左到右
- row-reverse 从右到左
- column 从上到下
- column-reverse 从下到上
justify-content:设置主轴上的子元素排列方式
- flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
- lex-end 从尾部开始排列
- center 在主轴居中对齐(如果主轴是x轴 则水平居中)
- space-around 平分剩余空间
- space-between 先两边贴边 再平分剩余空间(重要)
flex-wrap:设置子元素是否换行
- nowrap 默认值,不换行
- wrap 换行
align-content:设置侧轴上的子元素的排列方式(多行)
- flex-start 默认值 在侧轴的头部开始排列
- flex-end 在侧轴的尾部开始排列
- center 在侧轴的中间显示
- space-around 子项在侧轴平分剩余空间
- space-between 子项在侧轴先分布在两头,再平分剩余空间
- stretch 设置子项元素高度平分父元素高度
align-items:设置侧轴上的子元素排列方式(单行)
- flex-start 默认值 从上到下
- flex-end 从下到上
- center 挤在一起居中(垂直居中)
- stretch 拉伸
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
align-content 和align-items区别
- align-items 适合于单行情况下,只有上对齐、下对齐、居中和拉伸
- align-content 适合于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、配剩余空间等属性值
总结就是单行找align-items 多行找align-content