1、什么是flex布局
flex 是 flexibleBox 的缩写,意为 “弹性布局”,是css3新增的内容。flex灵活性高,任何一个容器都可以指定为flex布局。flex布局的原理是,通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
2、flex布局的常用属性
2.1、常见父现属性
(1)flex-direction:设置主轴方向
属性值 | 说明 |
row | 默认值,从左到右 |
row-reverse | 从右到左 |
column | 从上到下 |
column-reverse | 从下到上 |
(2)justify-content:设置主轴上的子元素的排列方式
属性值 | 说明 |
flex-start | 默认值,从头部开始 |
flex-end | 从尾部开始排列 |
center | 在主轴中居中对齐 |
space-around | 从下到上 |
space-between | 先两边贴边,再平分剩余空间 |
(3)flex-wrap:设置子元素是否换行
默认情况下,所有子元素都排在一条线(“轴线”)上,flex-wrap属性定义,默认不换行,排不开会缩小显示
属性值 | 说明 |
nowrap | 默认值,不换行 |
wrap | 换行 |
(4)align-content:设置侧轴上的子元素的排列方式(只对多行有效,单行无效)
属性值 | 说明 |
flex-start | 默认值,从头部开始排列 |
flex-end | 从尾部开始排列 |
center | 居中 |
space-around | 平分剩余空间 |
space-between | 先两边贴边,再平分剩余空间 |
(5)align-items:设置侧轴上的子元素的排列方式(单行)
属性值 | 说明 |
flex-start | 默认值,从上到下 |
flex-end | 从下到上 |
center | 居中 |
stretch | 拉伸 |
(6)flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
flex-fow:row wrap
2.2、常见子项属性
(1)flex:设置子项目占的分数
(2)align-self:控制子项目自己在侧轴的排列方式
可以允许单个子元素与其他子元素有不一样的对齐方式,可以覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等于stretch。
(3)order:定义子元素的排列顺序
数值越小,排列越靠前,默认为0