文章目录
Flex布局简介
使用方法 display: flex;
移动端常用。
通常把flex类型的盒子叫做flex容器,其所有的子元素叫做flex项目
flex盒子的子元素中的部分属性会失效(由flex其他的属性可代替)
flex盒子的子元素会有一个默认的排序方向(横向)称为主轴,另一个方向称为辅轴。
flex盒子的子元素默认不允许换行,如果在一行中(或一列)超出父元素宽度(或高度)。会缩小子元素的宽度,以保证其能够放在一行中。
Flex布局的CSS属性
1. 父属性(flex容器属性):
(1)flex-direction 设置主轴方向
-
按行(默认,从左到右)
row
flex-direction: row;
-
按列(从上到下)
column
flex-direction: column;
-
按行(从右到左)
row-reverse
flex-direction: row-reverse;
-
按列(从下到上)
column-reverse
flex-direction: column-reverse;
(2)justify-content 设置主轴上的子元素排列(对齐)方式
- flex-start (默认,从头开始)
justify-content: flex-start;
-
flex-end (从最后开始)
justify-content: flex-end;
-
center (居中)
justify-content:center;
-
space-around (平均分配距离)
justify-content:space-around;
-
space-between (两边贴边,平均分配距离)
justify-content: space-between;
以下举例使用默认的flex-direction: row;
方向,其他方向类似
(3)flex-wrap 设置是否允许子元素换行(或列)
-
nowrap (默认,不允许换行)子元素会被压缩
flex-wrap: nowrap;
-
wrap (允许换行)
flex-wrap: wrap;
(4)align-items设置侧轴上子元素排列(对齐)方式,用于不换行时
-
stretch 拉伸,默认-拉伸到父盒子大小(前提:侧轴方向上子盒子没有设置宽度或高度)
align-items: stretch;
-
flex-start (从头开始)
align-items: flex-start;
-
flex-end (从尾部开始)
align-items: flex-end;
-
center (居中)
align-items: center;
以下举例使用默认的flex-direction: row;
方向,即竖直方向上进行对齐。其他方向类似
(5)align-content设置侧轴上子元素排列(对齐)方式,用于换行时
-
stretch 拉伸,默认-拉伸到父盒子大小(前提:侧轴方向上子盒子没有设置宽度或高度)
align-content: stretch;
-
flex-start (从头开始)
align-content: flex-start;
-
flex-end (从尾部开始)
align-content: flex-end;
-
center (居中)
align-content: center;
-
space-around (平均分配距离)
align-content: space-around;
-
space-between (两边贴边,中间平均分配距离)
align-content: space-between;
以下举例使用默认的flex-direction: row;
方向,即竖直方向上进行对齐。其他方向类似
(6)flex-flow 复合属性
可以同时设置主轴方向和换行,如:
flex-flow: column wrap;
2. 子属性(flex项目):
(1)flex : 子元素所占剩余空间份数
-
0 (默认)
-
数字
flex获得剩余空间,不会计算已被其他子元素所占空间,如下图的左侧100px宽的盒子。
(2)align-self : 控制自己在侧轴上的对齐方式
和上面的属性一致,只是控制单独一个子元素的对齐方式,不影响其他子元素。
(3)order : 定义项目的排列顺序
数字越小越前,可以为负数
-
0 (默认)
-
数字