Node.js仿知乎服务端-深入理解RESTful API CSS的柔性布局初探 I .什么是Flex布局？ Flex是Flexible Box的缩写，意为“灵活的布局”，用于为箱形模型提供最大的灵活性。 任何容器都可以被指定为Flex布局。 。方框{ 显示器:flex } 复制代码 内嵌元素也可以使用Flex布局。 。方框{ 显示:内嵌-伸缩； } 复制代码 Webkit内核浏览器必须以-webkit为前缀。 。方框{ 显示:-WebKit-flex；/游猎/ 显示器:flex } 复制代码 请注意，子元素的float、clear和vertical-align属性在设置为Flex layout后将变得无效。 二。基本概念 具有Flex布局的元素被称为Flex容器，或简称为“容器”。它的所有子元素都自动成为容器成员，称为Flex项目，简称“项目”。

默认情况下，容器中有两个轴:水平主轴和垂直横轴。主轴的起始位置(与边界的交点)称为主起点，结束位置称为主终点；横轴的起始位置称为十字起点，终点位置称为十字终点。 默认情况下，项目沿主轴排列。单个项目占用的主轴空间称为主尺寸，单个项目占用的横轴空间称为十字尺寸。 第三，容器的属性 容器上设置了以下6个属性。

弯曲方向 柔性包装 柔性流 调整内容 对齐-项目 对齐内容

3.1弯曲方向属性 flex-direction属性确定主轴的方向(即项目的排列方向)。 。方框{ flex-direction:行|行-反转|列|列-反转； } 复制代码 它可能有四个值。

行(默认):主轴水平，起点在左端。 排-反:主轴水平，起点在右端。 柱:主轴垂直，起点在上沿。 列-反:主轴垂直，起点在下缘。

3.2柔性包装属性 默认情况下，所有项目都排列在一行上(也称为“轴”)。flex-wrap属性定义了当轴不适合时如何换行。

。方框{ flex-wrap:nowrap | wrap | wrap-reverse； } 复制代码

它可以接受三个值。

Nowrap(默认):不换行。 换行:换行，第一行在顶部。 Wrap-reverse:换行，第一行在底部。

3.3弹性流程 flex-flow属性是flex-direction属性和flex-wrap属性的缩写，默认值为row nowrap。 。方框{ flex-flow:| |； } 复制代码 3.4两端对齐-内容属性 justify-content属性定义项目在主轴上的对齐方式。 。方框{ justify-content:flex-start | flex-end | center | space-between | space-around； } 复制代码 它可能取五个值，具体对齐方式与轴的方向有关。我们假设主轴是从左到右。

弹性起点(默认):左对齐 柔性端:右对齐 居中:居中 Space-between:两端对齐，项目之间的间隔相等。 空格环绕:每一项两边的间隔相等。因此，项目之间的间隔是项目和边框之间的间隔的两倍。

3.5对齐-项目属性 align-items属性定义项目在横轴上的对齐方式。 。方框{ align-items:flex-start | flex-end | center | baseline | stretch； } 复制代码 它可能需要五个值。具体的对准与横轴的方向有关。我们假设横轴是从上到下。

Flex-start:十字轴的起点对齐。 柔性端点:相交轴的端点对齐。 中心:十字轴的中点对齐。 Baseline:项目中第一行文本的基线对齐方式。 Stretch(默认):如果项目的高度没有设置或设置为auto，它将占用整个容器的高度。

3.6对齐-内容属性 align-content属性定义多个轴的对齐方式。如果项目只有一个坐标轴，则该属性无效。 。方框{ align-content:flex-start | flex-end | center | space-between | space-around | stretch； } 复制代码 该属性可以有6个值。

弯曲起点:与横轴的起点对齐。 弯曲端:与横轴的末端对齐。 中心:与横轴的中点对齐。 间距:与相交轴的两端对齐，轴之间的间隔均匀分布。 空间环绕:每个轴两侧的间隔相等。因此，轴之间的间隔是轴和框架之间的间隔的两倍。 拉伸(默认值):该轴占据整个横轴。

四。项目的属性 项目中设置了以下6个属性。

命令 灵活增长 弯曲收缩 弹性基础 弯曲 自我对齐

4.1订单属性 order属性定义项目的顺序。值越小，排名越高，默认值为0。 。项目{ 订单:； } 复制代码

4.2弹性增长特性 flex-grow属性定义了项目的放大比例，默认为0，即如果有剩余空间，不会放大。 。项目{ 灵活增长:；/*默认为0 */ } 复制代码

如果所有项目的flex-grow属性为1，它们将平均分配剩余空间(如果有的话)。如果一个项目的flex-grow属性为2，而所有其他项目都为1，则前者占用的剩余空间将是其他项目的两倍。 4.3伸缩性能 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，项目将被缩小。 。项目{ 伸缩:；/*默认1 */ } 复制代码

如果所有项目的flex-shrink属性为1，则当空间不足时，它们将按相等的比例缩小。如果一个项目的flex-shrink属性为0，而所有其他项目都为1，则当空间不足时，前者不会收缩。 负值对此属性无效。 4.4弹性基础属性 flex-basis属性定义在分配额外空间之前项目占用的主要大小。根据这个属性，浏览器计算主轴是否有多余的空间。它的默认值是auto，这是项目的原始大小。 。项目{ 弹性基础:| auto/默认自动/ } 复制代码 它可以设置为与width或height属性相同的值(例如350px)，项目将占用固定的空间。 4.5弹性属性 该属性是flex-grow、flex-shrink和flex-basis的缩写，默认值为0 1 auto。最后两个属性是可选的。但是参考我上一篇文章。为了让flex-wrap看起来更好，我使用了Flex: 1。 。项目{ flex: none | [？|| ] } 复制代码 建议先用这个属性，不要分别写三个单独的属性，因为浏览器会计算相关的值。 4.6对齐自身属性 align-self属性允许单个项具有与其他项不同的对齐方式，这可以重写align-items属性。默认值是auto，这意味着继承父元素的align-items属性。如果没有父元素，就相当于stretch。 。项目{ align-self:auto | flex-start | flex-end |居中|基线|拉伸； }

download：Node.js仿知乎服务端-深入理解RESTful API