Flex布局

Flex布局的各大属性

1. flex布局，即为弹性布局，可以在水平和垂直方向上布局；

这里介绍的主要是些经常用到的样式属性。

   .box{
	     dispaly:flex;
   }

2. flex-direction: row | column ; （定义主轴方向，默认水平方向为主轴方向）

以下属性都是根据主轴方向来使用

   row:  水平排列 （ 默认值，默认主轴方向为水平方向）
   column: 垂直排列  （定义主轴方向为垂直方向）

如果不定义flex-direction的话，默认排列成一行，不换行，即使超出一行，它将自动缩放，保证一行排列，不换行，除非定义flex-wrap:wrap才会进行换行。

3.flex-wrap: nowrap | wrap （定义是否换行、换列，默认不换行，不换列）

    nowrap:  不换行、列  （默认值）（超出时自动收缩）（主轴为水平、垂直时）
    wrap: 超出自动换行 、列  （主轴为水平时换行，主轴为列时换列） 

一般用的都是主轴为水平的

4. justify-content: flex-start | flex-end | center | space-between | space-around;

• 定义位置： 定义在父级flex容器上
• 作用：规定容器内直接子元素，在主轴方向上的排列方式
• 注意：这里的主轴方向，即flex-direction定义的方向

即，它既可以规定子元素在水平方向上的排列方式，又可规定子元素在垂直方向上的排列方式，完全是根据主轴方向来定的

   .parent{
       display:flex;
       justify-content:center;
    }
    
	<div class='parent'>
	     <div class='son'></div>
	     <div class='son'></div>
	</div>

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items: flex-start | flex-end | center | baseline | stretch;

• 定义位置： 定义在父级flex容器上
• 作用： 规定项目在垂直方向上的对齐方式

flex-start：垂直方向上的起点对齐。
flex-end：垂直方向上的终点对齐。
center：垂直方向上的居中
baseline: 项目的第一行文字的基线对齐。（用的不多）
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• 定义位置：定义在父级容器上（只有在多轴时才有效）
• 作用： 规定子容器在垂直方向上的对齐方式

对于多轴的理解
在规定flex-wrap：wrap情况下，子容器在主轴方向一行（列）上排列不下，自动换行（列）的情况下，就会形成多轴。（即换行、换列）

flex-start：与垂直轴的起点对齐。
flex-end：与垂直轴的终点对齐。
center：与垂直轴的中点对齐。
space-between：与垂直轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

7.以下这些属性将设置在子元素上

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

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

7.2 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。(flex-grow:1,表示自动填充剩余空间,可用于 一边定宽，一边自适应 布局,编码见下方)

典型的三栏布局，编码如下（也可自动修改为两栏布局）

<style>
	#container{
		display: flex;
	}
	#container .main{
		flex-grow:1;   /* 重点：自动填充中间区域 */    
	}
	#container .left,
	#container .right{
		width: 200px;
	}
</style>

<div id="container">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
</div>

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

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

Flex布局的应用场景

1). 水平垂直居中

2). 一边定宽，一边自适应

3). 多列等分

Flex的一左一右布局

在flex布局中如果某个元素的margin为auto，那么它的margin将会自动填充为 剩下的空间。

<style>
     .box {
        display: flex;
        justify-content: flex-start;
      }

    .block {
        width: 100px;
        height: 100px;
        border:1px solid black;
     }
</style>

<div class="box">
	 <div class="block">块1</div>
	<div class="block">块2</div>
	 // 此地margin-left:auto；自动填充了剩余空间
	<div class="block" style="margin-left: auto;">块3</div> 
</div>	

参考链接：https://blog.csdn.net/yiyueqinghui/article/details/109242089

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html