flex布局

flex布局是什么？

1. Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
2. 行内元素也可以使用Flex布局。

/*块级元素*/
.header{
    display: flex;
}

/*行内元素*/
.header_1{
    display: inline-flex;
}

• 使用flex布局的元素称为(Flex Container)容器，它的所有子元素自动成为容器成员

• display:flex;从某种意义上来说可以替代 float，即添加后可实现浮动的效果而且不用考虑清楚浮动，大家可以尝试一下

• 需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效
  
  
  

容器属性介绍（以下六个属性设置在容器上）

flex布局里面包含了6个基本的属性，在下面会有详细的介绍。

flex-direction

.header {
	flex-direction: row;     /*使得元素由左向右横向排列 （默认方式）*/
    flex-direction: column;  /*使得元素自上而下纵向排列*/
    flex-direction: column-reverse; /*使得元素自下而上纵向排列*/
    flex-direction: row-reverse;    /*使得元素由右向左横向排列*/
}

说到这里就出现就引出了一个问题：假如我给定的子元素的宽度和超过父元素的总和会出现什么情况呢？
例如以下：

.header {
    display: flex;
    flex-direction: row;
    width: 1000px;
    height: 400px;
    border: black dotted;
    margin: 0 auto;
}

.log {
    margin: 30px;
    width: 500px;
    height: 70px;
    border: red solid;
}

• 意料之外的是并没有出现我们想要的溢出效果，而是以平分的方式铺满整行。
• 原因：当容器没有足够大的空间来存放所有的子元素时，子元素会按照一定的压缩率被压缩，这个压缩率就是由flex-shrink来设置（flex-shrink默认值为1）
  
  
  

flex-wrap

.header{
    flex-wrap: nowrap;        /*（默认方式） 不换行 */
    flex-wrap: wrap;          /* 换行 第一行在上方 */
    flex-wrap: wrap-reverse;  /* 换行（逆向） 第一行在下方 */
}

同样这里也引出一个问题：用了flex-wrap:wrap;自动换行属性后，两行div中间会不会有空行？

.header {
    display: flex;
    flex-wrap: wrap;
    width: 1000px;
    height: 400px;
    border: black dotted;
    margin: 0 auto;
}

.log {
    width: 400px;
    height: 70px;
    border: red solid;
}

其实是会的，解决方法：

1. 取消父容器的初始高度设置，让其高度适应内容
2. 父容器添加 align-content：flex-start （后面会有介绍）
   
   
   

flex-flow

.header{
    flex-flow : <flex-direction> <flex-wrap>;
    flex-flow: column wrap;  /*example*/
}

flex-flow可同时对 flex-direction和 flex-wrap进行设置，顺序不限，默认值是row nowrap。

justify-content

justify-content属性定义了项目在主轴上的对齐方式。

.json{
    justify-content: flex-start;     /*（默认值） 左对齐 */
    justify-content: flex-end;       /* 右对齐 */
    justify-content: center;         /* 居中对齐 */
    justify-content: space-between;  /* 两端对齐，项目之间的间隔都相等 */
    justify-content: space-around;   /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
    justify-content: space-evenly;   /* 均匀排列每个元素,每个元素之间的间隔相等 */
}

假设父容器下有 n 个子容器：
space-between 和 space-evenly 的区别

space-between	space-evenly
容器剩余空间由 (n -1) 个间隙平分	容器剩余空间由 (n +1) 个间隙平分
此时剩余空间由2个间隙平分	此时剩余空间由4个间隙平分

align-items

align-items属性定义项目在交叉轴上如何对齐。¹

.json_2{
    align-items: stretch;      /*（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。*/
    align-items: flex-start;   /* 交叉轴的起点对齐 */ 
    align-items: flex-end;     /* 交叉轴的终点对齐 */
    align-items: center;       /* 交叉轴的中点对齐 */
    align-items: baseline;     /* 项目的第一行文字的基线对齐 */ 

²

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。³

.json_3{
    align-content: stretch;     /* (默认值) 轴线占满整个交叉轴 */
    align-content: flex-start;  /* 与交叉轴的起点对齐 */
    align-content: flex-end;    /* 与交叉轴的终点对齐 */ 
    align-content: center;      /* 与交叉轴的中点对齐 */
    align-content: space-between;   /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
    align-content: space-around;    /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
}

项目属性介绍

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）

.header{
    flex-basis: auto;     /* 默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定。*/
    flex-basis: initial;  /* 设置该属性为它的默认值 */
    flex-basis: inherit;  /* 从父元素继承该属性 */
    flex-basis: 50px;     /* 一个长度单位或者一个百分比，规定灵活项目的初始长度。*/
}

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

1. flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

2. 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

3. 比如有 A， B， C的盒子，flex-shrink的默认值均为1，所以将剩余空间分为3分，即 1 : 1 : 1⁴

4. 父容器的宽度为1000px，每个子容器的宽度为500px，总和超出父容器 500px，那么500px将有三个容器按比例承担，每个容器承担 500/3px，

5. A 被移除溢出量： 500/3px，
   B 被移除溢出量： 500/3px，
   C 被移除溢出量： 500/3px
   
   
   

flex-grow

• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
  
  
  

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

.header{
    flex: auto;  /* "1 1 auto" */
    flex: none;  /* "0 0 auto" */
} 

• 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
  
  
  

order

order属性定义了项目的排列顺序，数值越小，排列越靠前，默认为0。(行优先)

初始	经过改变
1→ order : 1， 2 → order: 2 ，3 → order: 3 ，4 → order:4 ，5→ order:5	1→ order : 4， 2 → order: 2 ，3 → order: 3 ，4 → order:5 ，5→ order:1

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

.json_6{
    align-self: auto;       /*（默认值） 继承父元素的align-items属性，如果没有父元素，则等同于stretch*/
    align-self: stretch;    /* 如果项目未设置高度或设为auto，将占满整个容器的高度 */
    align-self: flex-start; /* 交叉轴的起点对齐 */
    align-self: flex-end;   /* 交叉轴的终点对齐 */
    align-self: center;     /* 交叉轴的中点对齐 */
    align-self: baseline;   /* 项目的第一行文字的基线对齐 */
}

本文部分参考：“ https://www.runoob.com/w3cnote/flex-grammar.html ”

---

1. 交叉轴：主轴垂直方向，默认垂直 起点上面。 主轴即为水平方向 默认起点为左侧 ↩︎

2. 基线对齐：所谓基线对齐，就是各种inline元素都保持其基线与其父元素的基线是对齐的。例如如果有图片的话，则图片的底端也会贴着父元素的基线。 ↩︎

3. 多轴线：至少2个块级元素分布在不同行 ↩︎

4. 剩余空间：剩余空间 = 子容器总宽度和 - 父容器宽度和 ↩︎