Flex布局

      在学习flex布局之前，我们常用的布局方式是基于盒模型上的，使用display属性+float属性+position属性帮助我们完成布局。但是某些布局就不易实现。

一、什么是Flex布局？

       Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。使用Flex 布局，可以简便、完整、响应式地实现各种页面布局。

Flex布局在PC端的兼容性较差，Webkit 内核的浏览器，必须加上-webkit前缀。

二、布局原理

       采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。当我们为父盒子设置 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

        当我们想要完成上图布局效果时，在传统盒模型中需要使用float属性让三个盒子浮动在一行，再使用定位或者外边距进行位置的调整。使用浮动后因为脱离文档流的缘故，父元素会失去高度，这又涉及了清除浮动等一系列的问题。

       而flex布局相对简单很多，修改父元素display:flex，你会发现div自动就排列成了一行，而且没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float；随着浏览器不断兼容以及旧版本的淘汰，flex布局注定会成为更为流行的布局方案。

         下面我们就来了解Flex的相关属性。

三、Flex父项相关属性

1.设置主轴方向：flex-direction                

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

      flex-direction的默认排序方式为横向排列，通过里面的属性值更改排列方式。

值	含义
row	默认 从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

2.设置主轴上的子元素排列方式：justify-content

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

         这里默认主轴为x轴，即flex-direction:row。

值	含义
flex-start	默认值 从头部开始 从左到右排列
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两边贴边 再平分剩余空间

space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

而space-between是两端对齐，项目之间的间隔都相等。

3.设置子元素是否换行：flex-wrap

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

        默认情况下，项目都排在一条线（又称"轴线"）上。flex-warp属性定义，如果一条轴线排不下，如何换行。

值	含义
nowrap	默认值，不换行
wrap	换行

4.设置侧轴上的子元素的排列方式（多行）：align-content

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

     只能用于子项出现换行的情况（多行），在单行下是没有效果的！！

值	含义
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头、再平分剩余空间
stretch	设置子项元素高度平分父元素高度

5.设置侧轴上的子元素排列方式（单行）：align-items

.box {
  align-items: flex-start | flex-end | center | stretch;
}

值	含义
flex-start	默认值 从上到下
flex-end	从下到上
center	居中（侧轴y轴就是垂直居中对齐）
stretch	拉伸

6.复合属性-同时设置方向和换行：flex-flow

flex-flow是flex-direction和flex-wrap属性的简写形式，默认值为 row nowrap。

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

四、Flex子项相关属性

以下属性是添加到项目上的。

1.定义项目顺序：order属性

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

.item {
  order: <integer>;
}

2.定义项目放大：flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

3.定义项目缩小：flex-shrink

.item {
  flex-shrink: <number>; /* default 1 */
}

       该属性用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。且这个宽度是包含border的。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

上图中第二个项目flex-shrink为0，所以自身不会缩小。

4.定义项目宽度：flex-basis

.item {
  flex-basis: <length> | auto; /* default auto */
}

       该属性用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

5.flex复合写法

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

       flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

1. 当 flex 取值为 none，则计算值为 0 0 auto

2.当 flex 取值为 auto，则计算值为 1 1 auto

3..当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%

4.当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1（注意 0% 是一个百分比而不是一个非负数字）

5.当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%

6. 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

6.控制子项在侧轴上的排列方式：align-self

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

表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

本篇文章参考了以下两篇博客：

https://www.cnblogs.com/echolun/p/11299460.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool