.box {

height: 300px;

background-color: #ccc;

/* 重点记住下面三个：display: flex; justify-content:center;align-items: center; */

/* 设置为flex容器 */

display: flex;

/* 设置(主轴)水平对齐方式 */

justify-content: center;

/* 设置(侧轴)垂直对齐方式 */

align-items: center;

/* flex-direction: row; */

/* flex-wrap: wrap; */

/* 以上两个的复合写法如下 */

/* flex-flow:row-reverse wrap; */

/* align-content: stretch; */

}

.box>div {

/* 之前学的设置并排的方法 */

/* display: inline-block; */

/* float: left; */

width: 100px;

height: 100px;

background-color: red;

border: 1px solid black;

}

/* 清除浮动 */

/* .box::after{

content: none;

display: block;

clear: both;

} */

flex-direction属性用来控制上图中伸缩容器中主轴的方向，同时也决定了伸缩项目的方向。

1.flex-direction:row;也是默认值，即主轴的方向和正常的方向一样，从左到右排列。

2.flex-direction:row-reverse;和row的方向相反，从右到左排列。

3.flex-direction:column;从上到下排列。

4.flex-direction:column-reverse;从下到上排列。 以上只针对ltr书写方式，对于rtl正好相反了。

flex-wrap属性控制伸缩容器是单行还是多行，也决定了侧轴方向(新的一行的堆放方向)。

1.flex-wrap:nowrap;伸缩容器单行显示，默认值；

2.flex-wrap:wrap;伸缩容器多行显示；伸缩项目每一行的排列顺序由上到下依次。

3.flex-wrap:wrap-reverse;伸缩容器多行显示，但是伸缩项目每一行的排列顺序由下到上依次排列。

flex-flow属性为flex-direction(主轴方向)和flex-wrap(侧轴方向)的缩写，两个属性决定了伸缩容器的主轴与侧轴。

flex-flow: [flex-direction] [flex-wrap]; 默认值为row nowrap

举两个栗子：

flex-flow:row;也是默认值；主轴是行内方向，单行显示，不换行；

flex-flow:row-reverse wrap;主轴和行内方向相反，从右到左，项目每一行由上到下排列(侧轴)。

justify-content用于定义伸缩项目在主轴上面的的对齐方式，当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。

1.justify-content: flex-start;伸缩项目向主轴的起始位置开始对齐，后面的每元素紧挨着前一个元素对齐。

2.justify-content: flex-end;伸缩项目向主轴的结束位置对齐，前面的每一个元素紧挨着后一个元素对齐。

3.justify-content: center;伸缩项目相互对齐并在主轴上面处于居中，并且第一个元素到主轴起点的距离等于最后一个元素到主轴终点的位置。以上3中都是“捆绑”在一个分别靠左、靠右、居中对齐。

4.justify-content: space-between;伸缩项目平均的分配在主轴上面，并且第一个元素和主轴的起点紧挨，最后一个元素和主轴上终点紧挨，中间剩下的伸缩项目在确保两两间隔相等的情况下进行平分。

5.justify-content:space-around;伸缩项目平均的分布在主轴上面，并且第一个元素到主轴起点距离和最后一个元素到主轴终点的距离相等，且等于中间元素两两的间距的一半。完美的平均分配，这个布局在阿里系中很常见。

align-items用来定义伸缩项目在侧轴的对齐方式，这类似于[justify-content]属性，但是是另一个方向。
(flex-directon和flex-wrap是一对，justify-content和align-items是一对，前者分别定义主轴和侧轴的方向，后者分别定义主轴和侧轴中项目的对齐方式)。

1.align-items:flex-start;伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起点的边。

2.align-items:flex-end;伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。

3.align-items:center;伸缩项目的外边距在侧轴上居中放置。

4.align-items:baseline;如果伸缩项目的行内轴与侧轴为同一条，则该值与[flex-start]等效。 其它情况下，该值将参与基线对齐。

5.align-items:stretch;伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。

align-content属性可以用来调准伸缩行在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的[justify-content]属性类似。只不过这里元素是以一行为单位。请注意本属性在只有一行的伸缩容器上没有效果。当使用flex-wrap:wrap时候多行效果就出来了。

1.align-content: stretch;默认值,各行将会伸展以占用剩余的空间。

2.其他可以参考justify-content用法。

一键复制

编辑

Web IDE

原始数据

按行查看

历史