CSS - Flex 之最直观的方式学习 Flexbox 属性（一）

弹性盒模型（Flexbox Layout）是CSS3新增的一种布局模式。它可以很方便地用来改善动态或未知大小的子元素在父元素中的对齐，方向和顺序等等。flex容器的主要特性是它可以调整子元素的宽度或高度去填充可用的空白区，以最优的方式达到兼容不同屏幕大小。

很多设计师和开发人员发现flexbox布局很容易使用，因为元素的定位非常简单，只需要写很少的代码，就能达到预期效果。Flexbox布局算法不同于那些基于垂直或水平的块或内联布局。Flexbox布局应该用在小项目中的组件。

这篇文章主要集中在说明flex属性如何影响布局，而不是这些属性如何工作。

可能你会觉得flex很多属性很难记住，或是看了很多文字说明但是不知道具体效果如何，那么这篇文章就非常适合你了。

让我们开始吧！

BASICS

在我们开始之前先来定下规则，我们把父容器称为flex container，它的直接子元素称为flex items。

上面的盒子中，你可以看到用来描述flex container 和 它的子元素的属性与术语。如果你需要查看更多，点击这里。

flexbox从2009年的初稿走到现在，经历了时间的洗练和各种语法的变更。所以为了避免冲突，这篇文章我们只使用最新并且有效的版本。如果你需要兼容旧浏览器，你可以看看这篇文章(英文)。

最新的flexbox兼容以下浏览器：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

如果你需要查看更多浏览器兼容性，你可以看这里。

USAGE

使用flexbox布局，你需要在父元素上设置display属性

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

或者你可以把它当行内元素使用

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

注意：你给父容器设置了这个属性后，它的子元素都会自动变成flex items。

有很多种给flexbox属性分组的方式，到目前为止，我认为最简单，并且最容易理解的方式是按照flex container和flex items分成两组。下面，我们来解释各个元素是如何影响布局效果的。

Flexbox Container 属性

flex-direction

这个属性指定了flex items在flex container中是如何布局的。通过设置flex container的主轴的方向，它们会按照两个方向布局，水平的行或者垂直的列。

例子：

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction:         row;
}

设置为行，那么在ltr上下文环境下，所有flex items会按照从左到右的顺序排成一行。

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction:         row-reverse;
}

使用row-reverse属性，那么在ltr上下文环境下，子元素则会按照从右到左的顺序排成一行。

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction:         column;
}

使用column属性，flex items会按照从上到下的方式排列。

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

使用column-reverse，则会放过来。

默认值：row

注：row和row-reverse的排列方式取决于书写模式，所以如果是在rtl上下文环境下，它们都会反转。

flex-wrap

默认的flexbox概念是把所有子元素都放在一行里面，你可以通过flex-wrap属性来控制flex container是否将子元素分多行处理，以及新增行的方向。

例子：

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap:         nowrap;
}

Flex items会被置在一行里面，并且默认它们会被压缩来适应容器的宽度。

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

rap, Flex items会被按照从上到下从左到右的顺序分配到多行。

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap:         wrap-reverse;
}