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

2016-12-08 发布：hangge 阅读：1010

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

二、伸缩容器的相关属性说明

1，display属性

通过 display 属性可以指定某元素是否为伸缩容器，可选的属性值如下：

flex：产生块级伸缩容器
inline-flex：产生行内级伸缩容器

下面是一个最简单的伸缩容器样例：

完整代码如下：

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

  .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 class="flex-item">1</span>
      <span class="flex-item">2</span>
      <span class="flex-item">3</span>
    </span>
</body>
</html>

2，flex-direction属性

通过 flex-direction 属性可以指定主轴的方向，可选值有：row、row-reverse、column、column-reverse。

.flex-container{
  display: flex;
  flex-direction: column;
}

（1）row（默认值）：水平方向伸缩，伸缩项目从左向右排列。

（2）row-reverse：水平方向伸缩，伸缩项目从右向左排列。

（3）column：垂直方向伸缩，伸缩项目从上向下排列。

（4）column-reverse：垂直方向伸缩，伸缩项目从下向上排列。

3，flex-wrap属性

该属性主要用来指定伸缩容器在主轴线方向空间不足的情况下，是否换行以及如何换行。可选值有：nowrap、wrap、wrap-reverse。

.flex-container{
  display: flex;
  flex-wrap: wrap;
}

（1）nowrap（默认值）：即使空间不足，伸缩容器也不允许换行。

（2）wrap：在空间不足情况下允许换行。如果主轴为水平轴，则换行的方向是从上到下。

（3）wrap-reverse：在空间不足情况下允许换行。不过换行方向同 wrap 相反。

4，flex-flow属性

该属性是 flex-direction 和 flex-wrap 属性的缩写版本，它同时定义了伸缩容器的主轴和侧轴，其默认值是：row nowrap。

比如：

.flex-container{
  display: flex;
  flex-flow: column wrap;
}

等价于：

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

5，justify-content属性

该属性用来定义伸缩项目沿主轴线的对齐方式，可选值有：flex-start、flex-end、center、space-between、space-around。

.flex-container{
  display: flex;
  justify-content: center;
}

（1）flex-start（默认值）：伸缩项目向主轴线的起始位置靠齐。

（2）flex-end：伸缩项目向主轴线的结束位置靠齐。

（3）center：伸缩项目向主轴线的中间位置靠齐。

（4）space-between：伸缩项目会平均地分布在主轴线里。第一个项目在主轴线开始位置，最后一个项目在终点位置。

（5）space-around：伸缩项目会平均地分布在主轴线里，两端保留一半的空间。

6，align-items属性

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式，可选值有：flex-start、flex-end、center、baseline、stretch。

.flex-container{
  display: flex;
  align-items: center;
}

（1）flex-start(默认值)：伸缩项目向交叉轴的起始位置靠齐。

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

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

（4）stretch（默认值）：伸缩项目在交叉轴方向拉伸填充整个伸缩容器。

注意：这种情况下项目不能设置高度，否则看不到效果。

（5）baseline：伸缩项目根据它们的基线对齐。

.flex-container{
  display: flex;
  align-items: baseline;
}

#item1{
  padding-top: 15px;
}

#item2{
  padding-top: 10px;
}

#item3{
  padding-top: 5px;
}

7，align-content属性

该属性用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用 justify-content。可选值有：flex-start、flex-end、center、space-between、space-around、stretch。

.flex-container{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

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

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

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

（4）space-between：伸缩项目在交叉轴重平均分布。第一行在交叉位置开始位置，最后一行在交叉轴结束位置。

（5）space-around：伸缩项目在交叉轴重平均分布。并且两边各有一半的空间。

（6）stretch（默认值）：伸缩项目会在交叉轴上伸展以占用剩余的空间。