CSS——浅谈Flexbox是如何工作的

水深无声 2022-03-14 11:14 202阅读 0赞

flexbox 的潜在原则是使得布局更加灵活和直观。

### 文章目录 ###

*   *  属性1：display: flex
     *  属性2：flex-direction
     *  属性3：justify-content
     *  属性4：align-items
     *  属性5：align-self
     *  最后

## 属性1：display: flex ##

![display:flex][display_flex]  
在一个灰色背景的容器`div`里面，有四个颜色不同、尺寸不同的子`div`，此时每个`div`有默认的`display: block`，每一个的宽度也占满了一整行。

为了使用 flexbox，需要将你的容器放在 flex 容器中 ，见如下代码：

#container {
      display: flex;
    }

![display:flex][display_flex 1]  
可以看到，发生了一点变化。你的四个`div`显示到了一行上，但也就仅此而已。可是你要知道，在这背后，你赋予了你的 `div` 一个叫做 *flex上下文* 的东西。

你现在可以把它应用在你的上下文中了，是不是比传统的 CSS 简单很多！

## 属性2：flex-direction ##

一个 flexbox 容器有两个坐标轴：主轴和交叉轴，直观的来看如下图：  
![flexbox容器中的主轴和交叉轴][flexbox]

**默认情况下，元素都是从左到右地分布在主轴上**。这就是为什么当你应用`display: flex`的时候，形状默认水平分布的原因。

`flex-direction`，可以使你的主轴旋转。

#container {
      display: flex;
      flex-direction: column;
    }

![使flexbox容器的主轴旋转][flexbox 1]  
这里有一个很重要的区别：`flex-direction: column`并不是把你的形状分布在交叉轴上。而是使主轴自身发生了旋转，从水平方向旋转到了垂直方向。

还有一些其他的`flex-direction`可选项，如：`row-reverse`和`column-reverse` 是反向排列。  
![在这里插入图片描述][2019030411252655.gif]

## 属性3：justify-content ##

`justify-content`控制的是你在主轴上如何对齐元素。

这里我们需要对主轴和交叉轴的区别有更深一点的理解。首先让我们回到`flex-firection: row`。

#container {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }

使用 *justify-content*，你有五个选择：

flex-start

flex-end

center

space-between

space-around

![在这里插入图片描述][20190304112850183.gif]  
`space-around`和`space-between`是最直观的。`space-between`使每个元素之间有相同的距离，但是不包含元素和容器之间的距离。

`space-around`让每个元素块的两侧有相同的空隙距离。这就意味着最外层的元素和容器之间的距离，是两个元素之间距离的一半（每个元素块的左右两侧都贡献了一个不重叠的等距离，因此是两倍的间隙）。

最后小结：记住`justify-content`是沿着主轴的，`flex-direction`是转换主轴的。这对你以后移动元素很关键。

## 属性4：align-items ##

如果你已经消化了`justify-content`，那么`align-items`对你俩讲将是轻而易举的事了。

`justify-content`是沿着主轴的，而`align-items`是应用到交叉轴上的。

我们一起看一下`align-items`命令。

flex-start

flex-end

center

stretch

baseline

前三个和`justify-content`没什么区别，后两个则有一些不同。

`stretch`你的元素将会被拉伸充满整个交叉轴。  
`baseline`则会使你的文字底部对齐。见图知意。  
![在这里插入图片描述][20190304113556629.gif]  
（注意：如果用`align-items: stretch`，你必须要将元素的`height`设置成`auto`，否则`height`属性将会覆盖`stretch`）

对于`baseline`要意识到，如果你把文字标签拿掉，那么将会用元素的底部对齐来替代原来的效果，如下图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]  
为了更好的展示主轴和交叉轴，我们结合justify-content和align-items来看一下两个flex-direction的核心不同。

![在这里插入图片描述][20190304114234838.gif]  
用row，元素被分布在水平主轴上。  
用column，被分布在垂直主轴上。

在这两个 例子 中，不论垂直还是水平方向，四个元素都是被居中的

## 属性5：align-self ##

`align-self`允许你手动操作一个特定元素的对齐方式。

对于一个元素而言，它基本上是对`align-items`的覆盖。尽管`align-self`默认值设成了`auto`，但是它和`align-items`所有的属性都是一样的，这也使得这个元素继承了容器的`align-items`。

#container {
      align-items: flex-start;
    }
    .square#one {
      align-self: center;
    }
    // 只有这个形状会居中。

我们来看一下它设置的结果是什么样的。对前两个形状设置不同的`align-self`，其他元素设置为`align-items: center`和`flex-direction: row`。  
![在这里插入图片描述][20190304140911134.gif]

## 最后 ##

尽管我们仅仅讲了 flexbox 的皮毛，但是这些命令应该也足够你应付很多基本布局了。

[display_flex]: /images/20220313/5a52ebb68bba4edc8d416149efde97c6.png
[display_flex 1]: /images/20220313/8313052ead754b7ca45615b70a7fd7be.png
[flexbox]: /images/20220313/a54e7b92ce6140e394007f1294d717d8.png
[flexbox 1]: /images/20220313/347050cc3e36457594c130719f1d660c.png
[2019030411252655.gif]: /images/20220313/0ff73ce8eefb4ce09343555b8658a065.png
[20190304112850183.gif]: /images/20220313/11986c159a644233ac3ef7625091786f.png
[20190304113556629.gif]: /images/20220313/c898dbb98bf443cd8dfffbb968632119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tpeW9vbWV0YWw_size_16_color_FFFFFF_t_70]: /images/20220313/49104b87a7fa4232bc207f890b7f48bd.png
[20190304114234838.gif]: /images/20220313/dcdbb04b77b649179d3d15775da3e76d.png
[20190304140911134.gif]: /images/20220313/ff484653df704f2ab622403a61b36ee7.png