[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
[https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
[https://blog.csdn.net/m0\_37058714/article/details/80765562](https://blog.csdn.net/m0_37058714/article/details/80765562)
**浏览器四大内核**
四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko
* **Firefox** (Gecko内核，俗称Firefox内核)
* **Chrome谷歌浏览器**(统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核)
* **Safari浏览器** (Webkit内核)
* **Opera浏览器**(最初是自己的Presto内核，后来是Webkit，现在是Blink内核)
* **搜狗、QQ浏览器、阿里云**（IE兼容模式+Webkit高速模式）
* **360极速、猎豹浏览器**（IE+Chrome双内核）
* **2345浏览器、百度、世界之窗、遨游（3.x为双内核）**（以前是IE内核，现在也是IE+Chrome双内核）
### **flex兼容性**
>容器默认存在两根轴：水平的**主轴**（main axis）和垂直的**交叉轴**（cross axis）。主轴的开始位置（与边框的交叉点）叫做`main start`，结束位置叫做`main end`；交叉轴的开始位置叫做`cross start`，结束位置叫做`cross end`。
项目默认沿主轴排列。单个项目占据的主轴空间叫做`main size`，占据的交叉轴空间叫做`cross size`。交叉轴根据主轴的方向分向下↓的交叉轴与向右→的交叉轴
~~~
.container{
display: flex;/*行内元素为：online-flex*/
/*Webkit 内核的浏览器，必须加上`-webkit`前缀*/
display: -webkit-flex; /* Safari */
}
~~~
>[danger]**注意**.container设为 Flex 布局以后，子元素的`float`、`clear`和`vertical-align`属性将失效
## container容器的属性
* **flex-direction** 属性决定项目item**主轴的方向**（决定它的子元素按照什么方向来排列，**即项目item的排列方向**）
row： 默认，主轴方向为→
row-reverse：主轴方向为←
column：主轴方向为↓
column-reverse：主轴方向为↑
如果flex-direction是row或者row-reverse，那么主轴就是justify-contain
如果flex-direction是column或者column-reverse,那么主轴就是align-items
~~~
.container{
flex-direction: row(默认) | row-reverse | column | column-reverse;
}
~~~
* **flex-wrap** 一条轴线排不下，如何换行
~~~
.container{
flex-wrap: nowrap(默认) | wrap | wrap-reverse
}
~~~
（1）`nowrap`（默认）：不换行。
（2）`wrap`：换行，第一行在上方。
（3）`wrap-reverse`：换行，第一行在下方。
* **flex-flow** 是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`
flex-flow: \<flex-direction\> || \<flex-wrap\>;
~~~
.container{
flex-flow: row nowrap;
}
~~~
* **justify-content** 项目item在主轴上的对齐方式
从上可知 flex-direction属性的row 与row-reverse决定主轴的方向
* `flex-start`（默认值）：主轴起始方向对齐
* `flex-end`：主轴结束方向对齐
* `center`： 居中
* `space-between`：两端对齐，项目之间的间隔都相等。
* `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
```
display: flex;
flex-flow:row nowrap;
justify-content:flex-start;
```
```
display: flex;
flex-flow:row nowrap;
justify-content:flex-end;
```
```
display: flex;
flex-flow:row-reverse nowrap;
justify-content:flex-start;
```
```
display: flex;
flex-flow:row-reverse nowrap;
justify-content:flex-end;
```
```
display: flex;
flex-flow:row nowrap;
justify-content:center;
```
```
display: flex;
flex-flow:row-reverse nowrap;
justify-content:center;
```
```
display: flex;
flex-flow:row nowrap;
justify-content:space-between;
```
```
display: flex;
flex-flow:row-reverse nowrap;
justify-content:space-between;
```
```
display: flex;
flex-flow:row nowrap;
justify-content:space-around;
```
```
display: flex;
flex-flow:row-reverse nowrap;
justify-content:space-around;
```
* **align-items** 定义项目在交叉轴上如何对齐。
* `flex-start`：交叉轴的起点对齐。
* `flex-end`：交叉轴的终点对齐。
* `center`：交叉轴的中点对齐。
* `baseline`: 项目的第一行文字的基线对齐。
* `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-start;/*item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:row-reverse nowrap;/*主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-start;/*item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column-reverse nowrap;/*主轴方向↑*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-start;/*item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column nowrap;/*主轴方向↓*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-start;/*item在交叉轴的对齐方式 */
```
flex-end：交叉轴的终点对齐
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-end;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:row-reverse nowrap;/* 主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-end;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column nowrap;/* 主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-end;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column-reverse nowrap;/* 主轴方向↑*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: flex-end;/* item在交叉轴的对齐方式 */
```
center：交叉轴的中点对齐
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: center;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:row-reverse nowrap;/* 主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: center;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column nowrap;/* 主轴方向↓*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: center;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column-reverse nowrap;/* 主轴方向↑*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: center;/* item在交叉轴的对齐方式 */
```
允许换行时center居中，换行后存在间隙，我们使用align-content: center;替换align-items: center;
```
display: flex;
flex-flow:row wrap;/* 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: center;/* item在交叉轴的对齐方式 */
```
baseline：项目的第一行文字的基线对齐
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: baseline;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:row-reverse nowrap;/* 主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: baseline;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column nowrap;/* 主轴方向↓*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: baseline;/* item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:column-reverse nowrap;/* 主轴方向↑*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: baseline;/* item在交叉轴的对齐方式 */
```
stretch：如果项目item未设置高度或设为auto，将占满整个容器的高度
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: stretch;/*默认 item在交叉轴的对齐方式 */
```
```
display: flex;
flex-flow:row-reverse nowrap;/* 主轴方向←*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-items: stretch;/*默认 item在交叉轴的对齐方式 */
```
* **align-content** 用法与align-items一致，定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 即项目只有一行时无效果
* `flex-start`：与交叉轴的起点对齐。
* `flex-end`：与交叉轴的终点对齐。
* `center`：与交叉轴的中点对齐。
* `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
* `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
* `stretch`（默认值）：轴线占满整个交叉轴。
只有一根轴线时
```
display: flex;
flex-flow:row nowrap;/*默认 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-content: center;
```
如下图所示没有生效
修改代码初始效果如下
当允许换行时项目就有两行即两根轴线align-content: center;生效
```
display: flex;
flex-flow:row wrap;/* 主轴方向→*/
justify-content:flex-start;/*默认 item在主轴的对齐方式*/
align-content: center;
```
html代码参考，
```
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<style type="text/css">
.container>div{
width: 200px;
height: 50px;
}
.container>.item-1{
background-color: #09BB07;
}
.container>.item-2{
background-color: #333333;
}
.container>.item-3{
background-color: #E80080;
}
.container>.item-4{
background-color: #F76260;
}
.container>.item-5{
background-color: #FFB400;
}
.container>.item-6{
background-color: #8A6DE9;
}
h1{
margin: 0;
}
.container{
width: 1000px;
height: 200px;
text-align: center;
background-color: #007AFF;
display:-webkit-flex;
display: flex;
flex-flow:row-reverse nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
justify-content:flex-start;/*item在主轴的对齐方式 flex-start | flex-end | center | space-between | space-around;*/
align-items: stretch;/*item在交叉轴的对齐方式 flex-start | flex-end | center | baseline | stretch*/
}
.container{
width: 1000px;
height: 200px;
text-align: center;
background-color: #007AFF;
display:-webkit-flex;
display: flex;
flex-flow:row wrap;/*主轴方向包括 row row-reverse column column-reverse*/
justify-content:flex-start;/*item在主轴的对齐方式 flex-start | flex-end | center | space-between | space-around;*/
align-content: center;/*flex-start | flex-end | center | space-between | space-around | stretch*/
}
</style>
</head>
<body>
<div class="container">
<div class="item-1"><h1>1</h1></div>
<div class="item-2"><h1>2</h1></div>
<div class="item-3" style="font-size: 20px;"><h1>3</h1></div>
</div>
<hr>
<div class="container">
<div class="item-1" style="height: 80px;font-size: 36px;">我爱你</div>
<div class="item-2" style="height: 40px">塞北的雪</div>
<div class="item-3" style="font-size: 25px;">我亦是行人</div>
</div>
<hr>
<div class="container">
<div class="item-1" style="height:auto;">item没设置高度</div>
<div class="item-2" style="height:auto;">或者设置item高度为auto</div>
<div class="item-3" style="height:auto;">则stretch时item高度填满容器</div>
</div>
<hr>
<div class="container">
<div class="item-1"><h1>1</h1></div>
<div class="item-2"><h1>2</h1></div>
<div class="item-3" style="font-size: 20px;"><h1>3</h1></div>
<div class="item-4"><h1>4</h1></div>
<div class="item-5"><h1>5</h1></div>
<div class="item-6"><h1>6</h1></div>
</div>
</body>
</html>
```
## **项目item的属性**
* **order** 定义项目的排列顺序。数值越小，排列越靠前，默认为0
* **flex-grow** 定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大
* **flex-shrink**
* **flex-basis**
* **flex**
* **align-self**
**order**：定义项目的排列顺序。数值越小，排列越靠前，默认为0
```
<style type="text/css">
.container1>div{
width: 200px;
}
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
justify-content:flex-start;/*item在主轴的对齐方式 flex-start | flex-end | center | space-between | space-around;*/
align-content: flex-start;/*flex-start | flex-end | center | baseline | stretch*/
}
</style>
<div class="container1" style="width: 1000px;height: 200px;text-align: center;background-color: #007AFF;">
<div class="item1" style="background-color: #09BB07;height: 50px;"><h1>1</h1></div>
<div class="item2" style="background-color: #333333;height: 30px;"><h1>2</h1></div>
<div class="item3" style="background-color: #E80080;height: 25px;"><h1>3</h1></div>
<div class="item4" style="background-color: #F76260;height: 10px;"><h1>4</h1></div>
<div class="item5" style="background-color: #FFB400;height: 40px;"><h1>5</h1></div>
<div class="item6" style="background-color: #8A6DE9;height: 45px;"><h1>6</h1></div>
</div>
```
添加order
```
<style type="text/css">
.container1>div{
width: 200px;
}
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
justify-content:flex-start;/*item在主轴的对齐方式 flex-start | flex-end | center | space-between | space-around;*/
align-content: flex-start;/*flex-start | flex-end | center | baseline | stretch*/
}
</style>
<div class="container1" style="width: 1000px;height: 200px;text-align: center;background-color: #007AFF;">
<div class="item1" style="order:3;background-color: #09BB07;height: 50px;"><h1>1</h1></div>
<div class="item2" style="order:2;background-color: #333333;height: 30px;"><h1>2</h1></div>
<div class="item3" style="order:1;background-color: #E80080;height: 25px;"><h1>3</h1></div>
<div class="item4" style="order:4;background-color: #F76260;height: 10px;"><h1>4</h1></div>
<div class="item5" style="order:6;background-color: #FFB400;height: 40px;"><h1>5</h1></div>
<div class="item6" style="order:5;background-color: #8A6DE9;height: 45px;"><h1>6</h1></div>
</div>
```
**flex-grow**：属性定义项目的放大比例，默认为`0`（父元素的宽度存在剩余宽度，也不放大），当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
**举个例子**:
父元素宽500px，有两个子元素：A、B和C。A宽为100px，B宽为200px，C宽为100px。 则空余空间为 500-（100+200+100）= 100px。 如果A，B都不索取剩余空间，则有100px的空余空间
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 500px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="flex-grow:0;order:1;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div>
<div class="item2" style="flex-grow:0;order:6;background-color: #FFB400;width: 200px;height: 40px;"><h1>B</h1></div>
<div class="item3" style="flex-grow:0;order:5;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div>
</div>
```
如果A索取剩余空间:设置item1类元素flex-grow为1，B、C不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px
如果A，B都设索取剩余空间，C不索取，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2))）=133.33...,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（200px (2/(1+2))）=266.66...
如果A，B、C都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2,B设置flex-grow为2。
则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2+2))）=120，
最终B的大小为 自身宽度（200px）+ B获得剩余宽度为（100px (2/(1+2+2))）=240,
最终C的大小为 自身宽度（100px）+ C获得剩余宽度为（100px (2/(1+2+2))）=140,
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 500px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="flex-grow:1;order:1;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div>
<div class="item2" style="flex-grow:2;order:6;background-color: #FFB400;width: 200px;height: 40px;"><h1>B</h1></div>
<div class="item3" style="flex-grow:2;order:5;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div>
</div>
```
**flex-shrink**属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。 `flex-shrink`的默认值为1，当父元素的宽度小于所有子元素的宽度的和时，子元素的宽度会减小。值越大，减小的越厉害。如果值为0，表示不减小
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="flex-shrink:0;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div>
<div class="item2" style="flex-shrink:0;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div>
<div class="item3" style="flex-shrink:0;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div>
</div>
```
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="flex-shrink:2;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div>
<div class="item2" style="flex-shrink:0;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div>
<div class="item3" style="flex-shrink:1;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div>
</div>
```
**flex-basis**属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为`auto`，即项目的本来大小
它可以设为跟`width`或`height`属性一样的值（比如350px），则项目将占据固定空间
其实，width也可以设置item宽度。如果元素上同时设置了width和flex-basis，那么width 的值就会被flex-basis覆盖掉。
如图 flex-basis替换掉了item2的width
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 200px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="flex-shrink:0;background-color: #E80080;width: 100px;height: 25px;"><h1>A</h1></div>
<div class="item2" style="flex-shrink:0;flex-basis:200px;background-color: #FFB400;width: 100px;height: 40px;"><h1>B</h1></div>
<div class="item3" style="flex-shrink:0;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>C</h1></div>
</div>
```
### **flex属性**
`flex`属性是`flex-grow`,`flex-shrink`和`flex-basis`的简写，默认值为`0 1 auto`。后两个属性可选。
该属性有两个快捷值：`auto`(`1 1 auto`) 和 none (`0 0 auto`)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
### **align-self属性**
`align-self`属性允许单个项目有与其他项目不一样的对齐方式，可覆盖容器container的`align-items`属性。默认值为`auto`，表示继承父元素的`align-items`属性，如果没有父元素，则等同于`stretch`。
```
<style type="text/css">
.container1{
display:-webkit-flex;
display: flex;
flex-flow:row nowrap;/*主轴方向包括 row row-reverse column column-reverse*/
}
</style>
<div class="container1" style="width: 1000px;height: 100px;text-align: center;background-color: #007AFF;">
<div class="item1" style="align-self: auto;background-color: #E80080;width: 100px;height: 45px;"><h1>1</h1></div>
<div class="item2" style="align-self: flex-start;background-color: #FFB400;width: 100px;height: 45px;"><h1>2</h1></div>
<div class="item3" style="align-self: flex-end;background-color: #8A6DE9;width: 100px;height: 45px;"><h1>3</h1></div>
<div class="item3" style="align-self: center;background-color: #09BB07;width: 100px;height: 45px;"><h1>4</h1></div>
<div class="item3" style="align-self: baseline;background-color: #333333;width: 100px;height: 45px;"><h1>5</h1></div>
<div class="item3" style="align-self: stretch;background-color: #F76260;width: 100px;height: 45px;"><h1>6</h1></div>
</div>
```
