标题

CSS 弹性盒子布局
- CSS 属性
- - 应用在父容器元素上的CSS属性
  - - 1.display: flex | inline-flex;
    - 2. flex-direction
    - 3. flex-wrap
    - 4. flex-flow
    - 5. justify-content
    - 6. align-items
    - 7. align-content
  - 应用在子元素上的CSS属性
  - - order
    - flex-grow
    - flex-shrink
    - flex-basis
    - align-self

CSS 弹性盒子布局

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

CSS 属性

CSS 弹性盒子布局的css分两种：

一种是应用中父容器的的CSS,用于设定父容器本身或者全部子元素的表现形式
另一种则是应用在子元素上，用于设置单个子元素的表现行为

下面将逐一展示css代码和效果

应用在父容器元素上的CSS属性

1.display: flex | inline-flex;

用于设定一个flex（**弹性盒子布局**）容器

flex 设定一个块级的flex（弹性盒子布局）容器

<ul style="display: inline-flex;"><li>1</li><li>2</li>
</ul>
<ul style="display: inline-flex;"><li>1</li><li>2</li>
</ul>

inline-flex 设定一个行内的flex（弹性盒子布局）容器

<ul style="display: inline-flex;"><li>1</li><li>2</li>
</ul>
<ul style="display: inline-flex;"><li>1</li><li>2</li>
</ul>

2. flex-direction

设置伸缩盒对象的子元素在父容器中位置

flex-direction: row; 设置伸缩盒对象的子元素在父容器中的水平分布并靠在父容器的左侧

<ul class="box" style="flex-direction: row;"><li>1</li><li>2</li><li>3</li>
</ul>

flex-direction: row-reverse; 设置伸缩盒对象的子元素在父容器中的位置水平逆序分布并靠在父容器的右侧

<ul class="box" style="flex-direction: row-reverse;"><li>1</li><li>2</li><li>3</li>
</ul>

flex-direction: column; 设置伸缩盒对象的子元素在父容器中的位置垂直分布并靠在父容器上面

<ul class="box" style="flex-direction:column;"><li>1</li><li>2</li><li>3</li>
</ul>

flex-direction: column-reverse; 设置伸缩盒对象的子元素在父容器中的位置垂直逆序分布并靠在父容器底部

<ul class="box" style="flex-direction:column;"><li>1</li><li>2</li><li>3</li>
</ul>

3. flex-wrap

设置伸缩盒对象的子元素超出父容器时是否换行

flex-wrap: nowrap; 设置伸缩盒对象的子元素超出父容器时是不换行，如果没有设置min-width,这样会压缩子元素的width

<ul class="box" style="flex-wrap: wrap;"><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li>
</ul>

2. flex-wrap: wrap; 设置伸缩盒对象的子元素超出父容器时是换行

<ul class="box" style="flex-wrap: wrap;"><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li>
</ul>

flex-wrap: wrap-reverse; 设置伸缩盒对象的子元素超出父容器时是自下而上换行

<ul class="box" style="flex-wrap: wrap-reverse;"><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li><li>1</li><li>2</li><li>3</li>
</ul>

4. flex-flow

复合属性，设置伸缩盒对象子元素的排列方式

 flex-flow: <‘flex-direction’> || <‘flex-wrap’>

<ul class="box" style="flex-flow: column wrap-reverse; max-height: 200px;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

5. justify-content

设置或检索弹性盒子元素在水平方向上的对齐方式。

justify-content:flex-start; 设置伸缩盒对象的子元素在父容器中水平方向上左对齐

<ul class="box" style="justify-content:flex-start;"><li>1</li><li>2</li><li>3</li>
</ul>

justify-content:flex-end; 设置伸缩盒对象的子元素在父容器中水平方向上右对齐

<ul class="box" style="justify-content:flex-end;"><li>1</li><li>2</li><li>3</li>
</ul>

justify-content:center; 设置伸缩盒对象的子元素在父容器中水平方向上居中对齐

<ul class="box" style="justify-content:center;"><li>1</li><li>2</li><li>3</li>
</ul>

justify-content:space-around; 设置伸缩盒对象的子元素在父容器中水平方向上平均分布

<ul class="box" style="justify-content:space-around"><li>1</li><li>2</li><li>3</li>
</ul>

justify-content:space-between; 设置伸缩盒对象的子元素在父容器中水平方向上平均分布

<ul class="box" style="justify-content:space-between;"><li>1</li><li>2</li><li>3</li>
</ul>

6. align-items

设置弹性盒子元素在垂直方向上的对齐方式。（适用于子元素排列为单行）

align-items:flex-start; 设置伸缩盒对象的子元素在父容器中紧靠顶部

<ul class="box" style="min-height: 200px; align-items:flex-start;"><li>1</li><li>2</li>    <li>3</li>
</ul>

align-items:flex-end;设置伸缩盒对象的子元素在父容器中紧靠底部

<ul class="box" style="min-height: 200px; align-items:flex-end;"><li>1</li><li>2</li><li>3</li>
</ul>

3. align-items:center;设置伸缩盒对象的子元素在父容器中垂直居中

<ul class="box" style="min-height: 200px; align-items:center;"><li>1</li><li>2</li><li>3</li>
</ul>

4. align-items:baseline;设置伸缩盒对象的子元素在父容器中基线对齐.如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。

<ul class="box" style="min-height: 200px; align-items:baseline;"><li style="height: 30px;">1</li><li style="height: 40px;">2</li><li>3</li>
</ul>

5. align-items:stretch;如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

<ul class="box" style="min-height: 200px; align-items:baseline;"><li style="height: 30px;">1</li><li style="height: 40px;">2</li><li>3</li>
</ul>

7. align-content

设置弹性盒堆叠伸缩行的垂直方向上对齐方式。（适用于子元素排列为多行）

align-content: flex-start; 设置弹性盒堆叠伸缩行的顶部对齐

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: flex-start;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

2. align-content: flex-end;设置弹性盒堆叠伸缩行的底部对齐

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: flex-end;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

3. align-content: center; 设置弹性盒堆叠伸缩行的垂直居中

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: center;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

4. align-content: space-between; 设置弹性盒堆叠伸缩行的平均分布，第一行和最后一行会紧靠边框

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: space-between;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

5. align-content: space-around; 设置弹性盒堆叠伸缩行的平均分布，第一行和最后一行不会紧靠边框

<ul class="box" style="min-height: 200px; flex-wrap: wrap; align-content: space-around;"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li>
</ul>

6. align-content:stretch; 各行将会伸展以占用剩余的空间

<ul class="box1" style="display: flex; min-height: 200px; flex-wrap: wrap; align-content: stretch;"><li style="width: 50px;">1</li><li style="width: 50px;">2</li><li style="width: 50px;">3</li><li style="width: 50px;">4</li><li style="width: 50px;">5</li><li style="width: 50px;">6</li><li style="width: 50px;">7</li><li style="width: 50px;">8</li><li style="width: 50px;">9</li><li style="width: 50px;">10</li><li style="width: 50px;">11</li><li style="width: 50px;">12</li><li style="width: 50px;">13</li>
</ul>

应用在子元素上的CSS属性

order

用整数值来定义排列顺序，数值小的排在前面。可以为负值

<ul class="box" style="justify-content: space-around;"><li style="order: 3;">1</li><li style="order: 2;">2</li><li style="order: 1;">3</li>
</ul>

flex-grow

设置弹性盒的扩展比率。根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。

<ul class="box" style="justify-content: space-around;"><li>1</li><li style="flex-grow:1;">2</li><li style="flex-grow:3;">3</li>
</ul>
/**
*  不设置“1” 的扩展比例；所以“1”的宽度为默认宽度；
*  “2”和“3”的扩展比例为1：3；也就是说把父容器content
*  宽度减去“1”的宽度，然后再把剩余的宽度分成1+3=4份，
*  “2”占一份，“3” 占据三份
*/

flex-shrink

设置弹性盒的收缩比率。根据弹性盒子元素所设置的扩展因子作为比率来分配收缩空间。

<ul class="box" style="justify-content: space-around;"><li style="width: 400px;">1</li><li style="width: 400px;">2</li><li style="width: 400px; flex-shrink:3;">3</li>
</ul>
/***  不设置“1” “2“收缩比例；“3”的收缩比例为3；* 收缩比例跟扩展比例相反，当子元素可宽度加起* 来超过父容器的content的宽度，则子元素需要* 按收缩比例来分摊超出的宽度。也就是说减去分* 担的宽度。这里每个子元素的默认宽度为400px,* 而父容器的宽度为600px,则超出了200px.这时就* 需要每个子元素按比例减去各自的宽度。分别为* 40px:40px:120px
*/

flex-basis

设置弹性盒伸缩基准值

<ul class="box" style="justify-content: space-around;"><li style="width: 400px;">1</li><li style="width: 400px;flex-basis:600px">2</li><li style="width: 400px; flex-shrink:3;">3</li>
</ul>

align-self

设置或检索弹性盒子元素自身在垂直方向上的对齐方式

可选值：

align-self: auto | flex-start | flex-end | center | baseline | stretch

auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

<ul class="box" style="justify-content: space-around; height: 100px;"><li style="align-self: auto;">auto</li><li style="align-self: flex-start;">flex-start</li><li style="align-self: flex-end;">flex-end</li><li style="align-self: center;">center</li><li style="align-self: baseline;">baseline</li><li style="align-self: stretch;">stretch</li>
</ul>

以上就是 CSS 弹性盒子布局的简述。

本文参考自：

http://caibaojian.com/flexbox-guide.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

本文案例源码下载地址：
https://download.csdn.net/download/weixin_44869002/11912701