-
flex-direction 定义子项目怎样排列,定义主轴方向
-
justify-content 子项目整体在主轴方向的对齐
-
align-items 定义子项目整体在主轴垂直方向的对齐
-
align-content 定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
-
flex-wrap 设置当项目在容器中一行无法显示的时候如何处理。(是否换行)
-
flex-flow flex-deriction和flex-wrap属性的简写,默认值为[row nowrap]
1. flex-direction :row | row-reverse | column | column-reverse
含义:定义容器要在哪个方向上堆叠 flex 子项目。
flex-direction:row; flex-direction:row-reverse;
水平方向从左到右 水平方向从右到左
![]()
flex-direction:column; flex-direction:column-reverse;
垂直方向从上到下 垂直方向下到上
![]()
2. justify-content :center | flex-start | flex-end | space-around | space-between
含义:用于子项目整体在 flex 父容器中主轴方向的对齐
justify-content: center ;
主轴居中
justify-content: flex-start ; justify-content:flex-end ;
主轴开头位置 主轴末端对齐
![]()
justify-content: space-around ; justify-content: space-between ;
主轴各子项目周围带空格隔开 主轴各子项目之间带空格隔开
![]()
3. align-items:flex-start | flex-end | center | baseline | stretch含义:定义了项目在交叉轴上是如何对齐显示的
align-items:flex-start; align-items:flex-end;
交叉轴开始位置 交叉轴末尾位置
align-items:center ; align-items:baseline;
交叉轴中间 第一行文字的基线对齐 ?????
align-items:stretch ;
(默认值):如果子元素未设置高度或设为auto,将占满交叉轴整个容器的高度。
4. align-content: flex-start | flex-end | center | space-between | space-around | stretch
含义:定义多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start; 与交叉轴的起点对齐。
align-content: flex-end; 与交叉轴的终点对齐
align-content: center; 与交叉轴的中点对齐
align-content: space-between; 在交叉轴中的子项目之间空格隔开
align-content: space-around; 在交叉轴中的子项目周围空格隔开
5. flex-wrap:nowrap | wrap | wrap-reverse
含义:设置当项目在容器中一行无法显示的时候如何处理。
flex-wrap:wrap; flex-wrap:nowrap;
正常换行 表示不换行
![]()
![]()
flex-wrap:wrap-reverse;
反方向换行
![]()
6. flex-flow: flex-deriction属性值 flex-wrap属性值
flex-flow:row nowrap;
flex-flow:row wrap;
flex-flow:row wrap-reverse;
flex-flow:column nowrap;
flex-flow:column wrap;
flex-flow:column wrap-reverse;