[续更]一起来撸一下Flex布局里面的那些属性

Flex的全称是Flexible Box，意为弹性布局，用来为盒模型提供最大的灵活性。

Flex包含的属性有很多，每个属性又包含了许多不同意义的属性值···然而在实际开发中，能被我们临幸的可能也只是那么几个：

{
    display: flex;
    justify-content: center|flex-start...;
    align-items: center|flex-start...;
    flex-grow: auto...;
}

---

上面是一本正经的分割线！

一、Flex简介

任何一个容器都可以通过设置 display 为 flex/inline-flex 将其指定为Flex布局。对于设置了Flex布局的容器，子元素的 float、clear、vertical-align 属性将失效；但是，如果对这些子元素设置 position 定位，那么Flex属性的作用会失效，一张图说明他们的作用权重：

采用Flex属性布局的元素称为Flex容器，而其所有的子元素称为Flex项目。容器默认存在两根轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis）。轴的起始和结束为止分别称作main/cross start和main/cross end。项目默认沿主轴排列，项目占据的轴的空间叫main/cross size。详见下图：

Flex布局元素分为Flex容器和Flex项目，因而有Flex容器属性和Flex项目属性的区分。

二、Flex容器属性

1. Flex的容器属性包括：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1.1 flex-direction

该属性定义了主轴的方向，即项目的排列方向。value的取值包括：row | row-reverse | column | column-reverse。其中 row 是默认值，表示水平方向排列（起点在左端）; column 表示垂直方向（起点在顶端）;带 -reverse 的值则表示反方向。用法及其效果图如下：

示例代码：

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>

.flex-box{
    display: flex;     /*定义为flex布局*/
    flex-direction:row-reverse; /*主轴为水平方向，起点在右端*/
    background:orange;
}
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}

示例效果：

1.2 flex-wrap属性

该属性定义项目是否换行以及如何换行。在默认情况下，项目都排在一条轴线上，如果一条轴线排不下，浏览器就根据这个属性的值对项目排列做相应调整。value的取值包括：nowrap | wrap | wrap-reverse，其中，nowrap 是默认值，不换行。用法及其效果图如下：
示例代码：

.flex-box{
    flex-wrap: wrap;
}

示例效果：

说明：wrap 表示换行，第一行在上方。使用 row-reverse 换行时，第一行在下方，亦即图中item6会出现在第一行。

1.3 flex-flow属性

该属性是 flex-direction 和 flex-wrap 的简写形式，默认值为row nowrap。使用方式如下：
示例代码：:

.flex-box{
    flex-flow:colunm wrap;
}

1.4 justify-content属性

该属性定义了项目在主轴（main axis）上的对齐方式，value的取值包括：

• flex-start：默认值。轴的起始端对齐（main/cross start）
• flex-end：轴的终点端
• center：居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。那么项目之间的间隔就是项目与边框之间的间隔的两倍。

用法及效果如下：

说明：这些属性对项目的作用是根据主轴的方向不同而改变的，如果将 direction 设置为 column，那么这些效果则表现在纵向。

1.5 align-items属性

该属性定义项目在交叉轴（cross axis）上的对齐方式。value的取值包括：

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：居中
• baseline：以项目的第一行文字的基线对齐
• stretch：默认值，如果项目未设置高度或设为auto，那么项目将占满整个容器的高度。

效果如下：

1.6 align-content属性

该属性定义了多个轴线的对齐方式。value的取值包括：

• flex-start：与交叉轴的起点对齐
• flex-end：与交叉轴的终点对齐
• center：交叉轴上居中
• space-between：交叉轴上两端对齐，轴线之间的间隔两端分布
• space-around：每个轴线两侧的间隔都相等。那么，轴线之间的间隔是轴线与边框之间间隔的两倍
• stretch：默认值，轴线占满整个交叉轴

咦！怎么都这么熟悉呢？对比原来发现这个属性的取值是跟前两个属性的取值有很大相似的。但它们其的效果还是有区别的。看图：

对比下align-items里面的center，是不是发现不同呢？每一行项目之间的距离变小了！是变小了吗？其实是轴线居中了！在这里，因为项目的换行，形成了多条轴线，而align-content就是作用在轴线上的，所以它会让每一条轴线居中。而align-items是将所有的项目看做一个整体，即使项目换行，也是将整个项目看做是一条轴线，最后将这个整体居中。

三、Flex项目属性

1. Flex的项目属性包括：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.1 order属性

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

示例代码：

<div class="flex-box">
    <div class="flex-item">item1</div>
    <div class="flex-item">item2</div>
    <div class="flex-item">item3</div>
</div>

.flex-box{
    background:orange;
    display: flex;     /*定义为flex布局*/
    }
.flex-item{
    margin:10px;
    height:100px;
    width:100px;
    background: purple;
    color:#fff;
}
div:first-child{
    order:0;   /*item1的序号为0*/
}
div:nth-child(2){
    order:-1;
}
div:last-child{
    order:2;
}

示例效果：

说明：在本例中没有设置flex-direction的属性，那么其值默认是row，你也可以尝试将其设置成column，那么flex项目则会根据order纵向排列。

1.2 flex-grow属性

该属性定义项目的放大比例，默认为0，即不作任何的放大。flex容器下的项目是根据这个值的比例对容器的剩余空间进行瓜分的。使用效果如下：

说明：在使用这个属性的时候，一般也最好不要对flex项目设置宽度/高度，否则会影响flex容器的比例分配。

1.3 flex-shrink属性

该属性定义了项目的缩小比例，默认为1，即项目缩小。使用效果如下：

说明：这里flex容器的宽度设置成600px，flex项目的宽度均为300px，margin:10px；在为item1分配完空间后，剩下的空间被后面两个项目按比例缩小分配。

1.4 flex-basis属性

该属性定义了在分配多余空间之前，项目占据的主轴空间(main size)。浏览器根据这个属性，计算主轴(main asix)是否有多余空间。它的默认值为auto，即项目的原本大小。它换可以设置为跟width属性一样的值（eg: 100px），即项目占据固定空间（容器宽度不够自动被压缩）。使用效果如下：

说明：该属性的用法就像是使用width(flex-direction:row; 的时候)或heigh(direction为column的时候)属性那样，在容器宽度不够的时候，它会按照flex-shrink属性的默认值压缩项目。

1.5 flex属性

该属性是前三个属性：flex-grow、flex-shrink、flex-basis 的简写形式。默认值为0 1 auto，即不放大，自动缩小，后面两个属性值是可选项。该属性有两个快捷键值：auto(0 1 auto)，none（0 0 auto）。建议优先使用这个属性，而不是单独写三个分离的属性。

1.6 align-self属性

该属性允许单个项目有与其他项目不一样的对齐方式。可覆盖作用在flex容器上的align-items属性。默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同stretch。value的取值包括：auto、flex-start、flex-end、end、baseline、stretch。该属性的取值除了auto之外，其他属性作用在该项目上的效果跟align-items作用在项目父元素（flex容器）上的效果是一样的，唯一不同的是：align-self仅对使用了该属性的项目产生效果，align-items是对所有的项目产生效果。

天下武功，唯快不破。Flex的优秀在于它的快捷，开发过程中使用Flex布局可以轻松地达到你想要的布局效果，方便快捷。尝试它并爱上它～