CSS之flexbox指南

jiezi

5 年前

为了控制“对齐”，会用到以下属性：
justify-content——控制 主轴 (main axis) 上所有 item 的对齐；
align-items——控制 交叉轴 (cross axis) 上所有 item 的对齐；
align-self——控制 交叉轴 (cross axis) 上某一特定 item 的对齐；
align-content——当项目的数量多到占据多行时，控制 交叉轴 (cross axis) 上每行之间空间的分布情况；

主轴 与交叉轴 就相当于一个二维坐标系的横轴和纵轴。
当在容器的 css 参数中，设置 display:flex; 后，该容器即成为一个 flex box。
这时，我们可以通过设置 flex-direction:row; 或者 flex-direction:column; 来控制容器中的 item 的排布方向。
row代表横向排布，column代表纵向排布。
值得注意的是，主轴与交叉轴的方向会根据 flex-direction 值的不同而变化。
当 flex-direction:row 时，主轴和交叉轴的关系如下图所示：

而当 flex-direction:column 时，主轴与交叉轴的关系如下图所示：

例：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
            <div class="item">two</div>
            <div class="item">three</div>
            <div class="item">four</div>
            <div class="item">five</div>      
        </div>
</html>

css 文件：

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 600px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    background-color: #666;
    margin-right: 2px;
}

可以看到，我们有一个高 600px，宽 600px 的容器。并为该容器设置了 display:flex;，还通过flex-direction:row; 规定其中 item 的排布方向为横向排列。
我们只为其中的 item 设置了背景色和一个 2px 的右边距。
效果如图：

可以看到，当没有设置 item 的高、宽属性时，item 在容器中默认是拉伸填满容器的。
现在，我们为 item 设置高、宽属性：

.item{
    width: 100px;
    height: 100px;
    background-color: #666;
    margin-right: 2px;
}

效果如下图：

可以看到，拉伸效果消失了。
而且，所有的 item 都自动左对齐了。那么如果我们想让 item 都右对齐，应该怎么做呢？
这个时候 justify-content 属性就派上用场了。
justify-content属性，简单说来，就是控制 item 在主轴上的对齐方式。
其可取的值有：
justify-content: flex-start
justify-content: flex-end
justify-content: center
justify-content: space-between
justify-content: space-around
justify-content: stretch
justify-content: space-evenly

各个属性值所对应的效果如下：
flex-start（默认效果）

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-start;
    ...
}

flex-end

.container{
    height: 600px;
    width: 600px;
    justify-content: flex-end;
    ...
}

center

.container{
    height: 600px;
    width: 600px;
    justify-content: center;
    ...
}

space-between

.container{
    height: 600px;
    width: 600px;
    justify-content: space-between;
    ...
}

space-between属性值让各个 item 两边不留边距，而平均分配 item 之间的空间。P.S: 图中最右侧的 2px 的边距是之前设置的 item 的右边距。
space-around

.container{
    height: 600px;
    width: 600px;
    justify-content: space-around;
    ...
}

可以看到，正如 around 所暗示的，和 space-between 不同，这次左右两边都有分配空间。
stretch
由于设置了 item 的宽和高，所以 stretch 不会生效。
space-evenly

.container{
    height: 600px;
    width: 600px;
    justify-content: space-evenly;
    ...
}

space-evenly指的是空间的平均分配。

从上面的例子可以看出，当我们的 item 横向排布时，justify-content是控制着横方向上的元素对齐方式。
那如果我们希望控制竖方向上 item 的排列方式应该怎样做能？
这时候就需要用到 align-item 属性了。
为了便于理解，这次我们只用一个容器和一个 item，并且不设置justify-content。

html 文件：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">  
            <div class="item">one</div>
        </div>
</html>

css 样式

html, body {
    margin: 0;
    padding: 0;
}

.container{
    height: 600px;
    width: 100px;
    margin-top: 20px;
    margin-left: 20px;
    display: flex;
    border: 1px dotted black;
    flex-direction: row;
}

.item{
    height: 50px;
    width: 50px;
    background-color: #666;
}

效果如下图：

可以看到，在交叉轴（这种情况下也就是我们常说的纵轴）上，item 默认的排布也是 flex-start。
而align-items可以取的值也和 justify-content 类似：
align-items: flex-start
align-items: flex-end
align-items: center
align-items: stretch
align-items: baseline

flex-start（默认值）

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    ...
}

效果如上图所示。
flex-end

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    ...
}

flex-center

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    ...
}

stretch
同理，由于已经设置了 item 的宽和高，所以 stretch 不会产生拉伸效果。

.container{
    height: 600px;
    width: 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    ...
}

base-line
为了表现基线对齐，我们用到了三个 item，效果如图：

我们并没有给这三个 item 设置宽和高，它们会在交叉轴方向上占据自己需要的空间。

这就好像平面直角坐标系用横坐标和纵坐标定位一个点一样，我们可以同时使用这两个属性来定位一个 item 在容器中的位置。
比如，我们想让一个 item 定位到容器的中间。
就可以这样写：

又比如，想要让三个 item 在 box 的中轴线上分布，而且它们之间的空间相等：

可以看到，这里我们通过 justify-content:space-between 令这三个 item 之间的空间相等。又通过 aling-items:center 令他们在交叉轴方向上处于中间。

此时 item 排布的原理与 flex-direction:row 时是一致的。
只不过这次主轴换到了竖直方向，而交叉轴换到了水平方向。
根据上面我们讲到的原理，我们不妨试举一例。
比如，有竖直排布的三个 item，我们希望它们可以实现如下图所示的设计：

就可以这样设置我们的 css 样式：

.box {
  height:300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

通过 justify-content: flex-end 我们实现了让这三个 item 排布到主轴（这种情况下是竖直方向这个轴）的尾端 (end)；
再通过 align-items: center 我们实现了让这三个 item 排布到交叉轴（这种情况下是横向的这个轴）的中间。
综合起来，就形成了这样一个布局。

简单起见，我们可以直接将 start 理解为坐标系原点所在的方位，而 end 则是坐标轴的箭头所指向的无限远的方向。
需要指出的是，对于从左往右的书写模式，比如汉语、英语等，start 可以理解为 left，end 可以理解为 right，而对于从右往左的书写模式，比如阿拉伯语，则有，start 可以理解为 right，end 可以理解为 left。

当我们为一个 box 容器设置了 align-items 和 justify-content属性之后，这套约束的规则将对其中的所有 item 都适用。
可是如果我们不希望某一个 item 被这套规则约束怎么办呢？
这时候 align-self 就派上用场了。
align-self属性可以取 align-items 属性的所有值。
比如，在上面的例子中，如果我们把 3 号 item 的 align-self 值设置为：align-self:flex-end;，则有：

这就相当于 3 号 item 宣告天下，它不接受通过 align-items 设置的规则，而是要设置自己的规则，这也是为什么 align-self 可以取的值和 align-items 一模一样。

到目前为止，我们讨论了在 flex 容器内单个或多个容器的排布问题。如果我们有一个 flex 容器，并且其中的 item 占据了多行，这时候我们可以用到 align-content 属性，来控制行与行之间的空间分布。

align-content要发挥作用，需要容器的高度比各行 item 的总高度之和要高。

align-content属性可以取的值如下：
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly
比如，当 align-content 取flex-end时，有：

这些属性值与之前提到的功能一致，不再赘述。

CSS之flexbox指南

控制对齐方式需要用到的的属性

主轴(main axis)& 交叉轴(cross axis)

justify-content

align-items

同时使用 justify-content 和 align-items 属性

flex-direction: column 时的 item 排布

关于 start 和 end

align-self

align-content