【响应式Web设计】读书笔记 - 弹性布局与响应式图片（四） - 6

【简介】主要内容为流式布局中的对齐，主轴方向的对齐和交叉轴方向的对齐；交叉轴主要为 align-items 和 align-self 两个属性和 5 个属性值；主轴主要为 justify-content 属性 和 5 个属性值。

1. Flexbox 的对齐

流式布局(Flexbox)的对齐参照坐标轴，因此，运用流式布局下的对齐核心在理解坐标轴。坐标轴分为「主轴」和「交叉轴」。其中，「主轴」即我们数学中熟悉的 X 轴，「交叉轴」即我们数学中熟悉的 Y 轴。

同时，「主轴」和「交叉轴」可以调换，取决于 Flexbox 排列的方向。比如，如果将 Flexbox 的方向设置为 row，则「主轴」为横轴（X轴），「交叉轴」为纵轴（Y轴）；如果将 Flexbox 的方向设置为 column，则「主轴」为纵轴（Y轴），「交叉轴」为横轴（X轴）。

2. 交叉轴的对齐

2.1 交叉轴对齐的属性

控制沿交叉轴对齐的属性有两个 align-items 和 align-self。其中，align-items 控制子元素的竖直方向的对齐；align-self 控制元素自身的竖直方向的对齐。

首先，来看 align-items 的效果：

HTML 部分：

<div class="FlexWrapper">
    <div class="FlexInner">FlexInner中的内容。</div>
</div>

CSS部分：

.FlexWrapper {
    background-color: indigo;
    display: flex;
    height: 200px;
    width: 400px;
    align-items: center;
}
.FlexInner {
    background-color: #34005b;
    display: flex;
    height: 100px;
    width: 200px;
    color: #fff;
}

通过对 Wrapper 外部元素设置 align-items 属性，那么在 Wrapper 元素内的子元素就会受该属性的影响。

align-self 的效果：

HTML 部分：

<div class="FlexWrapper">
    <div class="FlexInner">FlexInner中的内容。</div>
    <div class="FlexInner AlignSelf">FlexInner + AlignSelf 中的内容。</div>
    <div class="FlexInner">FlexInner中的内容。</div>
</div>

CSS 部分：

.FlexWrapper {
    background-color: indigo;
    display: flex;
    height: 200px;
    width: 600px;
}
.FlexInner {
    background-color: #34005b;
    display: flex;
    height: 100px;
    width: 200px;
    color: #fff;
}
.AlignSelf {
    align-self: flex-end;
}

通过对第二个元素设置 align-self 元素，那么只有第二个元素受影响。

2.2 交叉轴对齐的属性值

Flexbox 为交叉轴对齐提供了以下值：

• flex-start：从交叉轴起始位置开始对齐；
• flex-end：从交叉轴末尾位置开始对齐；
• center：从交叉轴中间位置对齐；
• baseline：沿交叉轴基线对齐；
• stretch：将所有项沿基线对齐；

3. 主轴的对齐

控制沿主轴对齐的属性为 justifiy-content，其属性的可能值包括：

• flex-strat
• flex-end
• center
• space-between
• space-around

前三个属性值部分和交叉轴相同；后两个值中，space-between 表示元素间间隙相同，spac-around 表示 元素左右两边间距相同。

space-between 效果：

三个子元素宽度为 25%，包含它们的容器 Flexbox 的宽度为100%；设置为 space-between 后，三个子元素之间会有相同的间隙。

其中 HTML 部分：

<div class="FlexWrapper">
    <div class="FlexInner">FlexInner中的内容1。</div>
    <div class="FlexInner">FlexInner中的内容2。</div>
    <div class="FlexInner">FlexInner中的内容3。</div>
</div>

CSS 部分：

.FlexWrapper {
    background-color: indigo;
    display: flex;
    justify-content: space-between;
    height: 200px;
    width: 100%;
}
.FlexInner {
    background-color: #34005b;
    display: flex;
    height: 100px;
    width: 25%;
    color: #fff;
}

而设置为 space-around 后的效果为：

不需要额外的属性设置，三个元素两边的间隙会相同。

其中 HTML 部分为：

<div class="FlexWrapper">
    <div class="FlexInner">FlexInner中的内容1。</div>
    <div class="FlexInner">FlexInner中的内容2。</div>
    <div class="FlexInner">FlexInner中的内容3。</div>
</div>

CSS 部分：

.FlexWrapper {
    background-color: indigo;
    display: flex;
    justify-content: space-between;
    height: 200px;
    width: 100%;
}
.FlexInner {
    background-color: #34005b;
    display: flex;
    height: 100px;
    width: 25%;
    color: #fff;
}