Flex 布局

主轴

知识

1. 什么是主轴 ？

子元素排列的方向 

2. 常用排列方向有哪些 ？

row 水平
column 垂直

3. 如何设置主轴的方向

flex-direction: row;

Example 1

水平排列

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
}

完整代码 10.html

Example 2

垂直排列

完整代码 11.html

主轴元素排列方式

知识

1. 常用的排列方式

center	居中
space-between 两端对齐
space-around 
space-evenly 平均分配
flex-start 起点对齐
flex-end 重点对齐

2. 如何设置对齐方式

justify-content: flex-end;

Example 1

完整代码 21.html

Example 2

完整代码 22.html

Example 3

完整代码 23.html

Example 4

完整代码 24.html

Example 5

完整代码 25.html

Example 6

完整代码 26.html

交叉轴

知识

交叉轴 垂直与主轴， 随主轴方向的变化而变化

Example 1

完整代码 31.html

Example 2

完整代码 32.html

交叉轴元素排列方式

Example 1

完整代码 33.html

Example 2

完整代码 34.html

Example 3

完整代码 35.html

主轴上子元素换行

Example 1

完整代码 42.html

Example 2

完整代码 43.html

交叉轴元素排列方式（多轴）

当主轴元素换行之后， 相当于产生多条主轴， 对应的交叉轴也有多条

aligin-content 和 align-item 都可是设置交叉轴对齐方式

aligin-content 只有多轴的情况下才会生效

align-item 可用的属性值

• start
• center
• end

aligin-content 可用的属性值

• flex-start
• space-between
• space-around
• space-evenly
• center
• flex-end

align-content: flex-start;

Example 1 align-content

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: flex-start;
}

完整代码 61.html

Example 2 align-content

完整代码 62.html

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: flex-end;
}

Example 3 align-content

完整代码 63.html

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: center;
}

Example 4 align-content

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: space-between;
}

完整代码 64.html

Example 5 align-content

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: space-around;
}

完整代码 65.html

Example 6 align-content

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-content: space-evenly;
}

完整代码 66.html

Example 7 align-items

完整代码 51.html

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-items: start;
}

Example 8 align-items

完整代码 52.html

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-items: center;
}

Example 9 align-items

完整代码 53.html

.container {
    /* 此处省略基础样式 */
    display: flex;
    flex-direction: row;
    align-items: end;
}

放大

知识

当主轴有剩余空间， 可以使用 flex-grow 属性放大元素， 默认值为 0 表示不放大

子元素放大后尺寸计算公式 $$ 子元素放大后的尺寸 = \frac{主轴实际尺寸-子元素尺寸和}{子元素放大份数和} * 当前子元素放大份数 + 当前子元素的尺寸 $$

Example 1

完整代码 71.html

蓝色背景元素宽度放大结算结果

$$ 蓝色背景元素最终宽度 = \frac{1280-(100+100+100+100)}{(1+1+1+1)} * 1 + 100 = 320 $$

Example 2

完整代码 72.html

$$ 蓝色背景元素最终宽度 = \frac{1280-(100+100+100+100)}{(3+1+1+1)} * 3 + 100 = 540 $$

缩小

知识

当主轴空间不足时， 可以使用 flex-shrink 属性缩小元素， 默认值为 1，

子元素缩小后尺寸计算公式 $$ 子元素放大后的尺寸 = \frac{主轴实际尺寸-子元素尺寸和}{子元素缩小份数和} * 当前子元素缩小的份数 + 当前子元素的尺寸 $$

Example 1

完整代码 81.html

蓝色背景元素宽度放大结算结果

$$ 蓝色背景元素最终宽度 = \frac{1280-(500+500+500+500)}{(1+1+1+1)} * 1 + 500 = 320 $$

Example 2

完整代码 82.html

$$ 蓝色背景元素最终宽度 = \frac{1280-(500+500+500+500)}{(3+1+1+1)} * 3 + 500 = 140 $$