CSS3 - 弹性盒子模型(flexbox)详解3（伸缩项目的属性介绍、及样例）

作者：hangge | 2016-12-13 09:20

相关文章系列：
CSS3 - 弹性盒子模型(flexbox)详解1（基本概念介绍、浏览器支持情况）
CSS3 - 弹性盒子模型(flexbox)详解2（伸缩容器的属性介绍、及样例）
CSS3 - 弹性盒子模型(flexbox)详解3（伸缩项目的属性介绍、及样例）[当前文章]

三、伸缩项目的相关属性说明

1，order属性

该属性用于定义项目的排列顺序。数值越小、排列越靠前，默认值为：0。

比如我们将 item4 排到最前面：

<html>
<head>
    <meta charset="utf-8">
    <title>hangge.com</title>
</head>
<style>
  .flex-container{
    display: flex;
    border: 1px solid black;
    width: 300px;
    height: 120px;
  }

  #item4{
    order: -1;
  }
  
  .flex-item{
    width: 50px;
    height: 50px;
    margin: 5px;
    background-color: #60BDFF;
    color: #FFFFFF;
    font-size: 20px;
    font-weight:bold;
  }
</style>
<body>
    <span class="flex-container">
      <span id="item1" class="flex-item">1</span>
      <span id="item2" class="flex-item">2</span>
      <span id="item3" class="flex-item">3</span>
      <span id="item4" class="flex-item">4</span>
    </span>
</body>
</html>

2，flex-grow属性

该属性定义伸缩项目的放大比例，默认值是：0，即表示如果存在剩余空间，也不放大。
如果将所有的伸缩项目的 flex-grow 设置为 1，那么每个伸缩项目将设置为一个大小相等的剩余空间。
如果又将其中一个伸缩项目的 flex-grow 设置为 2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占的剩余空间的两倍。
比如我们将剩余空间都由 item3 占用：

<style>
  #item3{
    flex-grow: 1;
  }
</style>
<body>
    <span class="flex-container">
      <span id="item1" class="flex-item">1</span>
      <span id="item2" class="flex-item">2</span>
      <span id="item3" class="flex-item">3</span>
    </span>
</body>

3，flex-shrink属性

该属性用来定义伸缩项目的收缩能力，其默认值为：1。
比如下面样例中，item7 元素在空间不足的情况下，缩小为其他元素缩小大小的 1/3。

<style>
  #item7{
    flex-shrink: 3;
  }
</style>
<body>
    <span class="flex-container">
      <span id="item1" class="flex-item">1</span>
      <span id="item2" class="flex-item">2</span>
      <span id="item3" class="flex-item">3</span>
      <span id="item4" class="flex-item">4</span>
      <span id="item5" class="flex-item">5</span>
      <span id="item6" class="flex-item">6</span>
      <span id="item7" class="flex-item">7</span>
    </span>
</body>

4，flex-basis属性

该属性用来设置伸缩项目的基准值，剩余的空间按比率进行拉伸。默认值为：auto。
下面样例在还有剩余空间的情况下，将 item3 伸缩到 100px。

<style>
  #item3{
    flex-basis: 100px;
  }
</style>
<body>
    <span class="flex-container">
      <span id="item1" class="flex-item">1</span>
      <span id="item2" class="flex-item">2</span>
      <span id="item3" class="flex-item">3</span>
    </span>
</body>

5，flex属性

该属性是 flex-grow、flex-shrink 和 flex-basis 这三个属性的缩写。其语法如下：

flex: none | flex-grow flex-shrink flex-basis

其中第二个和第三个参数是可选参数。默认值为：0 1 auto。
flex:aoto 即为：1 1 auto
flex:none 即为：0 0 auto

比如下面我们把 item3 元素设置为 flex:1 后（本质上等于 flex-grow1），item3 元素便会把伸缩容器的剩余空间占满。

#item3{
  flex: 1;
}

6，align-self属性

该属性用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式。可选值有：auto、flex-start、flex-end、center、baseline、stretch。

#item3{
  align-self: center;
}

（1）auto：伸缩项目按照自身设置的宽高显示，如果没有设置，则按 stretch 来计算其值。

（2）flex-start：伸缩项目向交叉轴的开始位置靠齐。

（3）flex-end：伸缩项目向交叉轴的结束位置靠齐。

（4）center：伸缩项目向交叉轴的中心位置靠齐。

（5）baseline：伸缩项目按基线对齐。

<style>
  #item1{
    padding-top: 20px;
    align-self: baseline;
  }

  #item2{
    padding-top: 5px;
  }

  #item3{
    padding-top: 5px;
    align-self: baseline;
  }
</style>
<body>
    <span class="flex-container">
      <span id="item1" class="flex-item">1</span>
      <span id="item2" class="flex-item">2</span>
      <span id="item3" class="flex-item">3</span>
    </span>
</body>

（6）stretch：伸缩项目在交叉轴方向占满伸缩容器。（这个只有在项目不设置高度的情况下才看得到效果）

HTML5 / CSS3