Flex 布局父项常见属性

flex-direction

flex-direction 可以用来设置主轴的方向。

在 flex 布局中，是分为主轴和侧轴两个方向的。

默认主轴方向就是 x 轴方向，水平向右。

默认侧轴方向就是 y 轴方向，垂直向下。

属性值 说明
row 从左到右 (默认值)
row-reverse 从右到左
column 从上到下
column-reverse 从下到上

justify-content

justify-content 属性定义了项目在 主轴上 的对齐方式。

注意：使用这个属性之前一定要确定好主轴是哪个。

属性值 说明
flex-start 从头部开始排列 (默认值)
flex-end 从尾部开始排列
center 在主轴居中对齐
space-around 平分剩余空间
space-between 先两边贴边，再平分剩余空间

flex-wrap

默认情况下，项目都排在一条线上。flex-wrap 属性可以修改子元素是否换行显示。

属性值 说明
nowrap 不换行 (默认值)
wrap 换行

align-items

align-items 是控制子项在侧轴上的排列方式，在子项为 单行 的时候使用。

属性值 说明
flex-start 从上到下 (默认值)
flex-end 从下到上
center 挤在一起居中 (垂直居中)
stretch 拉伸

align-content

align-content 可以设置子项在侧轴上的排列方式，并且只能用于子项为 多行 的情况，在单行下是没有效果的。

属性值 说明
flex-start 在侧轴的头部开始排列 (默认值)
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项平分剩余空间
space-between 子项先两边贴边，再平分剩余空间
stretch 子项拉伸

flex-flow

flex-flow 属性是 flex-direction属性和 flex-wrap 属性的复合属性。

flex-flow: row wrap;

Flex 布局子项常见属性

flex

flex 属性定义子项分配 剩余空间，用 flex 来表示占多少份。

.item {
    flex: 1; /* default 0 */
}

align-self

align-self 属性用来控制子项自己在侧轴上的排列方式。它允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

span:nth-child(2) {
    /* 设置自己在侧轴上的排列方式 */
    align-self: flex-end;
}

order

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认值为 0 。

span:nth-child(2) {
    order: -1;
}