Flex布局 Flexbox属性具体解释

原文：A Visual Guide to CSS3 Flexbox Properties

Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐、方向、顺序，甚至它们是动态的或者不确定大小的新布局模型。

Flex容器的主要特征是可以调整其子元素在不同的屏幕大小中可以用最适合的方法填充合适的空间 。

非常多的设计师和开发人员发现Flex布局非常easy使用，它定位元素简单因此非常多复杂的布局可以用非常少的代码实现，引领更简单的开发过程。Flex布局的算法是基于方向的。不同于基于水平或者垂直的block和inline布局，这样的Flex布局可以被用在小的应用组件中。而CSS3 网格布局模型是新兴处理大规模的布局。

本文主要解说flex的每一个属性如何栩栩如生的影响布局。

1、基本概念:

在開始描写叙述Flexbox属性之前，我们先小小的介绍一下Flexbox模型，Flex布局由父容器称为Flex容器（flex-container）和它直接的子元素称为flex 项目（flex-item）构成，在下文中将它们简称为“容器”和“项目”。

在上图中你能够看到用来描写叙述Flex容器和它的子元素的属性和术语。你能够阅读W3C的官方文档来了解他们的意思。

• flex容器有两个參考的轴：水平的主轴（main axis）和交叉的轴（cross axis）。
• 主轴的開始位置main start。主轴结束位置main end。
• 交叉轴的開始位置叫做cross start，结束位置叫做cross end。
• 直接子元素“项目”沿主轴排列；
• 单个项目占领的主轴空间叫做main size，占领的交叉轴空间叫做cross size。

Flexbox是2009年W3C提出的新布局方案，这里用的是2014年9月的最新标准。它的最新的浏览器支持情况

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

2、使用方法:

使用flex布局首先在HTML中的父元素上设置display属性：

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

或者你想让它像内联元素一样。能够这样写：

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

注意：这是唯一的要设置在父容器上的属性，全部的直接子元素会成为自己主动flex项目。

3、flexbox 容器的属性：

flex-direction:row(默认值) | row-reverse | column | column-reverse;

该属性指定了Flex的项目如何在flex容器中排列，设置flex容器的主轴方向，它们(项目)两个基本的方向排列，就像一行一样水平排列或者像一列一样垂直排列。

values：

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

row 方向表明flex项目在一行中从左到右堆放在容器中。

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

row-reverse 方向表明flex项目从右到左堆放。

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

column 方向指明flex项目在一列中从顶部究竟部堆放

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

column-reverse 方向指明flex项目在一列中从底到顶部堆放

 flex-wrap:nowrap(默认值) | wrap | wrap-reverse;

初始情况下，Flexbox的理念是全部的项目都排列在一条线上（轴线），flex-wrap 属性控制容器是否将它的项目排列在一行或者多行，而且控制新行堆叠的方向。

values：

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

flex项目会排列在一条线上而且它们会缩放适应到容器的宽。

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

项目(flex items)会在多行展示，假设须要的话它们能够从左到右或者从上到下排列。

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

 flex-flow: <flex-direction> || <flex-wrap>;

该属性是上面两个属性的简写方式，前一个參数设置flex-direction，后一个參数设置flex-wrap;

values：

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

默认值： row nowarp

 justify-content:flex-start(默认值) | flex-end | center | space-between | space-around;

定义了项目在容器主轴上的对齐方式。当的容器中项目都是一行而且非弹性的时候或者项目是弹性的可是达到了它们的最小宽度的时候该属性能够定义容器中的剩余空间的分配。

values：

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
          flex-start;
}

全部项目向容器的左边对齐

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content:         flex-end;
}

全部项目向容器的右边对齐

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

全部项目在容器中居中对齐

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;
}

第一个和最后一个项目向容器的边界对齐，剩余的空间各个项目等分

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content:         space-around;
}

全部的项目等分剩余的容器空间。包含第一个和最后一个项目（所以项目之间的间隔比第一个和最后一个项目与容器边框的间隔大一倍）。

 align-items:flex-start | flex-end | center | baseline | stretch(默认值);

定义项目在交叉轴上的对齐方式，交叉轴与当前的轴线有关系，与justify-content非常相似，仅仅只是是垂直方向的；这属性为全部的项目设置默认的交叉轴上的对齐方式，包含匿名的。

values：

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items:         stretch;
}

项目会填充容器的整个高或者宽(fill the whole height )，从容器交叉轴的起点到交叉轴的结束点。

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items:         flex-start;
}

项目会堆放在容器交叉轴的起始位置（cross start ）。

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items:         flex-end;
}

项目会堆放在容器交叉轴的结束位置（cross end ）。

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items:         center;
}

项目会堆放在容器交叉轴的居中位置（ center of the cross axis ）

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items:         baseline;
}

全部项目的基线会对齐

基线？不知道基线是什么请戳这里-->基线是什么?

 align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认值);

当交叉轴上还有多余的空间时它定了多行的对齐方式，类似justify-content在主轴上对齐全部项目的方式一样。

values：

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

每一行的项目后面等比分配了交叉轴上的多余空间。

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

项目在容器的交叉轴起始点上堆放在一起。

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

项目在容器的交叉轴结束点上堆放在一起。

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

项目的行被堆放在容器的交叉轴线中间。

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

与justify-content类似，项目的行距离在容器的交叉轴线上被等分。第一行和末尾的一行与容器的边缘对齐。

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

与justify-content类似，项目的行等分了容器的交叉线上的剩余空间，第一行和最后一行相同也得到了一些，它们之间的间隔比首行和末行到容器边界的间隔大一倍。

注意：这个属性只当容器中有多行的项目时有效，假设全部项目只占一行，那这个属性对布局没有不论什么影响。

4、Flexbox 项目属性

<span style="font-size:14px; font-family: Arial, Helvetica, sans-serif;"> order: <integer></span>

order属性控制容器的直接子元素在容器中的顺序。默认在容器中这些项目是以该数字递增的方式排列的。

values:

values:
.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

该属性能够非常easy的控制项目的顺序，而不用在HTML代码里面做调整。这个整形值能够为负数，默认值是 0。

<span style="font-size:14px;">flex-grow: <number></span>

该属性指定项目的生长因素，它确定了当容器有剩余空间分配的时候相对于其它的项目当前的项目可以添加多少宽度。

values:

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

当全部的项目的flex-grow值相等的时候它们的size同样。

第二个项目占用了很多其它的剩余空间。

默认值是：0

注意：负数在这个属性中是没实用的

flex-shrink: <number>

该属性指定了项目的收缩因素，它确定了当容器还有剩余空间收缩的时候该项目相对于其它项目的收缩多少。

values:

.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

默认情况下，全部的项目都会收缩，可是当我们设置该属性的值为0的时候。项目会保持原有的大小。





默认值是：1

注意：负数在这个属性中是没实用的

flex-basis：auto | <width>

该属性的值和width和height的取值一样，在 flex factors分配剩余空间之前指定项目的初始的大小。

values:

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

默认值：auto

flex:none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]

该属性是flex-grow, flex-shrink 和flex-basis的缩写形式，同一时候属性值也有简写：auto表示(1,1,auto)。none表示(0,0,auto)

values:

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

注意： W3C鼓舞使用flex的简写形式。由于flex在使用过程中会顺便初正确的又一次设置没有确定的组件到常见使用方法。

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

该属性和容器的align-items属性有相同的作用。它是用在单一的项目上的，能够全然压倒容器中align-items定义的对齐方式。

values:

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

注意：auto 表示项目会使用父元素（容器）的align-items的值。假设该项目没有父元素的话align-self的值是stretch。

flex items值得注意的是：float、clear、vertical-align这些属性对于项目(flex item)会失效。