CSS中的弹性盒子总结

事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局。
比较新的布局方式：旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。
弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间（主要是为了容纳所有类型的显示设备和屏幕尺寸）的能力。

应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。

对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。

一、弹性盒布局相关词汇

图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

测试01.png

1.弹性容器(Flex container)

包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。

2.弹性项目(Flex item)

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

3.轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

注意：主轴与侧轴的概念

主轴就是弹性盒子子元素沿着排列的轴；与主轴垂直的轴称为侧轴。

如果你有 row 或者默认值,则主轴是水平方向，侧轴是垂直方向。

如果你有 column,则主轴是垂直方向，侧轴是水平方向。

4.方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点，可以通过属性设置方向。

5.行(Line)

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

6.尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为侧轴尺寸(cross size)。

二、弹性盒布局属性

1.不影响弹性盒子的属性

由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

多栏布局模块的 column-* 属性对弹性项目无效。
float与 clear对弹性项目无效。使用 float将使元素的 display属性计为block。
vertical-align 对弹性项目的对齐无效。

2.作用在父元素的属性

（1）display: flex | inline-flex;

box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）

inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）

flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）

inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）

flex：将对象作为弹性伸缩盒显示。

inline-flex：将对象作为内联块级弹性伸缩盒显示。

（2）flex-flow（复合属性）
设置或检索伸缩盒对象的子元素排列方式。可以同时设置 flex-direction/flex-wrap。

flex-direction (适用于父类容器的元素上):设置或检索伸缩盒对象的子元素在父容器中的位置。

row：横向从左到右排列（左对齐），默认的排列方式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;　　　　　//默认值，可以省略
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;　　　　　//如果无高度，默认撑满
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试02.PNG

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row-reverse;　　　　　//反转横向排列
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试03.PNG

column：纵向排列，可理解为相对当前主轴垂直方向。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;　　　　　//垂直改变排列方向
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      /* width: 50px; */　　　　　//不设置宽度，默认撑满
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试04.PNG

column-reverse:反转纵向排列，从后往前排，最后一项排在最上面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: column-reverse;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试05.PNG

flex-wrap (适用于父类容器上) 设置或检索伸缩盒对象的子元素超出父容器时是否换行。

nowrap：默认值，当子元素溢出父容器时不换行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: no-wrap;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 150px;　　　　　//子元素宽度之和超出了父元素
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试06.PNG

wrap：当子元素溢出父容器时自动换行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 120px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试07.PNG

注意此时子元素最大宽度不会超过父元素，即撑满，但高度会超出

wrap-reverse：当子元素溢出父容器时自动换行,方向同 wrap反转排列。与row-reverse、column-reverse有区别。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap-reverse;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 120px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试08.PNG

（3）justify-content 设置或检索弹性盒子元素在主轴方向上的对齐方式。

flex-start：默认值，弹性盒子元素将向行起始位置对齐。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试09.PNG

flex-end：弹性盒子元素将向行结束位置对齐。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试10.PNG

center：弹性盒子元素将向行中间位置对齐。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试11.PNG

space-between:弹性盒子元素会平均地分布在行里，两端靠边。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试12.PNG

space-around:弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      justify-content: space-around;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试13.PNG

（4）align-items 设置或检索弹性盒子元素在侧轴方向上的对齐方式。

flex-start：默认值，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试14.PNG

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试15.PNG

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: center;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试16.PNG

baseline：大部分情况按子元素第一行基线对齐。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: baseline;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
      font-size: 2em;
    }
    .d3 {
      background: blue;
      font-size: 1.5em;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1H</div>
    <div class="d2 child">2H</div>
    <div class="d3 child">3H</div>
  </div>
</body>
</html>

测试17.PNG

stretch：默认值，如果子元素未设置高度或设为auto，将占满整个父元素的高度。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      align-items: stretch;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 50px;
     /*  height: 50px; */
    }
    .d1 {
      background: red;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试18.PNG

（5）align-content 设置或检索弹性盒堆叠伸缩行的对齐方式，即定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

flex-start：各行向弹性盒容器的起始位置堆叠，不留间隙。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: flex-start;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试19.PNG

flex-end：各行向弹性盒容器的结束位置堆叠，不留间隙。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: flex-end;
      width: 300px;
      height: 150px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试20.PNG

center：各行向弹性盒容器的中间位置堆叠，不留间隙。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: center;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试21.PNG

space-between：各行在弹性盒容器中平均分布。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: space-between;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试22.PNG

space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      align-content: space-around;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试23.PNG

stretch：默认值，各行将会伸展以占用剩余的空间，但受设置高度影响。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      flex-wrap:wrap;
      /* align-content: stretch; */
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
    /*   height: 50px; */
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
     /*  height: 35px; */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试24.PNG

3.作用在子元素的属性

（1）align-self 设置或检索弹性盒子元素自身在侧轴方向上的对齐方式。

auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐，如果只有一个元素设置了baseline，相当于flex-start。

stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 200px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
      align-self: auto;  //因为设置了高度，所以不会拉伸，stretch效果一样
    }
    .d2 {
      background: green;
      height: 25px;
      align-self: flex-end;
    }
    .d3 {
      background: blue;
      height: 35px;
      align-self: center;
    }
     .d4 {
      background: red;
      height: 35px;
      font-size: 2em;
      align-self: baseline;
    }
    .d5 {
      background: green;
      height: 50px;
      align-self: baseline;
    }
    .d6 {
      background: blue;
      /* align-self: stretch; */  //默认效果
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
    <div class="d4 child">5H</div>
    <div class="d5 child">4</div>
    <div class="d6 child">6H</div>
  </div>
</body>
</html>

测试25.PNG

（2）order 用整数值来定义排列顺序，数值小的排在前面，默认值为0，可以为负值。两个order相同则按默认排序

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 70px;
    }
    .d1 {
      background: red;
      height: 50px;
      order: 2
    }
    .d2 {
      background: green;
      height: 25px;
    }
    .d3 {
      background: blue;
      height: 35px;
      order: 0;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试26.PNG

（3）flex ( 复合属性）
设置或检索伸缩盒对象的子元素如何分配空间。
默认计算值为：0 1 auto。
none：none关键字的计算值为： 0 0 auto。
auto ：auto 关键字的计算值为： 1 1 auto。

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

默认为0，即如果存在剩余空间，也不放大。

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 50px;　　　　　//设置了相同的宽度
      height: 50px;
    }
    .d1 {
      background: red;
      flex-grow: 1;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
      flex-grow: 1;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试27.PNG

flex-shrink 设置或检索弹性盒的收缩比率（根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。）

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

某元素设置为0，不进行收缩，宽度过大时会超出父元素。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 150px;
      height: 50px;
    }
    .d1 {
      background: red;
      flex-shrink: 0;
    }
    .d2 {
      background: green;
    }
    .d3 {
      background: blue;
      flex-shrink: 2;
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试28.PNG

测试28中 d1 收缩比例为 0，不收缩；d2 收缩比例默认为 1，d3 收缩比例为 2，所以 d2、d3 最终1:2 收缩。

flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

auto：无特定宽度值，取决于其它属性值。

用长度值/百分比来定义宽度。不允许负值。

相当于重新定义宽度。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container {
      display: flex;
      width: 300px;
      height: 100px;
      background: yellow;
    }
    .child {
      width: 50px;
      height: 50px;
    }
    .d1 {
      background: red;
      flex-basis: 100px;
    }
    .d2 {
      background: green;
      flex-basis: 30px;
    }
    .d3 {
      background: blue;
     
    } 
  </style>
</head>
<body>
  <div class="container">
    <div class="d1 child">1</div>
    <div class="d2 child">2</div>
    <div class="d3 child">3</div>
  </div>
</body>
</html>

测试29.PNG

终于结束啦 O(∩_∩)O~~
为了方便记忆和查询，简单做了思维导图

Flex布局属性.png

最后编辑于：2017.12.10 03:33:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,233评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,013评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,030评论 0赞 241
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,827评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,221评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,542评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,814评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,513评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,225评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,497评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,998评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,342评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,986评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,812评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,560评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,461评论 2赞 266