CSS Flexible Box Layout（CSS弹性盒布局）是CSS3中新增的一种布局方式，也被称为Flexbox或flex布局。它可以快速、方便地为元素或布局提供对齐、空间分配和相对位置等各种高效的属性和方法。

flex布局主要包含以下几个概念和值：

父元素属性：
* display：设置元素为flex容器。
* flex-direction：设置flex容器的主轴方向。包括row（从左到右的水平方向）、row-reverse（从右到左的水平方向）、column（从上到下的垂直方向）和 column-reverse（从下到上的垂直方向）。
* justify-content：设置flex容器中行（主轴方向）的对齐方式，包括flex-start（从头对齐）、flex-end（从尾对齐）、center、space-between（两端对齐且元素间距平均分配）、space-around（每个元素周围分配同样的空间）。
* align-items：设置flex容器中列（交叉轴方向）的对齐方式，包括flex-start、flex-end、center、baseline（基于文本的对齐方式）和stretch（拉伸）。
* flex-wrap：设置元素的换行方式。包括nowrap（不换行）、wrap（从上至下的换行）和 wrap-reverse（从下至上的换行）。
子元素属性：
* flex-grow：设置子元素的放大比例。
* flex-shrink：设置子元素的缩小比例。
* flex-basis：设置子元素的基准大小（用于计算空间分配）。
* flex：同时设置上述三个属性（缩写）。

其中，flex布局中一个非常重要的步骤是计算空间分配。其计算公式如下：

* 确定flex容器的主轴方向和交叉轴方向。
* 确定主轴上的剩余空间和基础空间（对于所有的子元素之和）。
* 确定每个子元素的flex-basis（如未设置，则根据内容计算），最小值为0。
* 根据每个子元素的flex-grow和剩余空间计算新的flex-basis。
* 根据每个子元素的flex-shrink和溢出空间计算新的flex-basis。
* 确定子元素在主轴方向上的大小和位置，以及在交叉轴方向上的位置。
* 最后，确定flex容器的大小。

在此过程中，子元素的flex-basis默认值是auto，既可以设置具体数值，也可以设置百分比或者设置为content（根据内容自适应），初始值为0。剩余空间是指flex容器的宽度或高度减去所有子元素的基础空间之和，即剩余的可用空间。基础空间是子元素根据flex-basis计算出的占用空间。

在flex布局中，不同的属性会相互影响，也会影响子元素的实际渲染效果。因此，在使用时需要仔细考虑和测试，以达到最佳的效果和布局。