关于前端:css系列flex

一、概念

1、简介

flex意为“弹性布局”，任何一个容器都可应用flex布局。

2、定义和用法

flex 是以下属性的简写属性：

flex-grow 示意当有残余空间的时候，调配给我的项目的比例
flex-shrink 示意当空间有余的时候，放大我的项目的比例
flex-basis 占据主轴的空间

flex 设置的是弹性我的项目的弹性长度。

3、语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex： 1// 相当于flex: 0 1 auto

正文：如果元素不是弹性我的项目，则 flex 属性有效。
Internet Explorer 10 以及更早的版本不反对 flex-grow flex-shrink flex-basis 属性。

二、flex用法

1、flex-grow

flex-grow 属性规定在雷同的容器中，我的项目绝对于其余弹性我的项目的增长量，默认值为0。

<style>#main {  width: 350px;  height: 100px;  border: 1px solid #c3c3c3;  display: flex;}#main div:nth-of-type(1) {flex-grow: 1;}#main div:nth-of-type(2) {flex-grow: 3;}#main div:nth-of-type(3) {flex-grow: 1;}#main div:nth-of-type(4) {flex-grow: 1;}#main div:nth-of-type(5) {flex-grow: 1;}</style><div id="main">  <div style="background-color:coral;"></div>  <div style="background-color:lightblue;"></div>  <div style="background-color:khaki;"></div>  <div style="background-color:pink;"></div>  <div style="background-color:lightgrey;"></div></div>

给款式增加了flex-grow后，总宽度为350px，一共有1+3+1+1+1=7个模块，因而可每个div的宽度为50px，而第二个元素占据3个，因而它的宽度为150px。

2、flex-shrink

flex-shrink 属性固定在雷同的容器中，我的项目绝对于其余弹性我的项目的膨胀量，默认值为1。

<style> #main {  width: 350px;  height: 100px;  border: 1px solid #c3c3c3;  display: flex;}#main div {  flex-grow: 1;  flex-shrink: 1;  flex-basis: 100px;}#main div:nth-of-type(2) {  flex-shrink: 3;}</style><div id="main">  <div class="v1" style="background-color:coral;"></div>  <div class="v2" style="background-color:lightblue;"></div>  <div class="v3" style="background-color:khaki;"></div>  <div class="v4" style="background-color:pink;"></div>  <div class="v5" style="background-color:lightgrey;"></div></div>

由上述代码可看出总宽度应为100 * 5=500，然而目前的款式宽度为350px，因而空间有余，flex会尽其所能不去扭转容器的宽度，而是压缩我的项目的宽度。

计算逻辑：
100为flex-basis的值

溢出空间 = 100 x 5 - 350 = 150
总权重 = 100 x 4 x 1 + 100 x 3 = 700
v1 = 100 - (150 x 1 x 100) / 700 = 78.572
v2 = 100 - (150 x 3 x 100) / 700 = 35.741
v3 = v4 = v5 = v1

如果不想元素被压缩，必须将flex-shrink设为 0。
比方v3的flex-shrink=0，则会占据空间100px，残余空间宽度为250px。

溢出空间 = 100 x 4 - 250 = 150
总权重 = 100 x 3 x 1 + 100 x 3 = 600
v1 = 100 - (150 x 1 x 100) / 600 = 75
v2 = 100 - (150 x 3 x 100) / 600 = 25
v4 = v5 = v1

3、flex-basis

flex-basis 属性规定弹性我的项目的初始长度，如果不设置，则等于内容自身的空间。

<style>#main {  width: 300px;  height: 100px;  border: 1px solid #c3c3c3;  display: flex;}#main div {  flex-grow: 0;  flex-shrink: 1;  flex-basis: 50px;}#main div:nth-of-type(2) {  flex-basis: 100px;}</style>

4、思考题

三、容器的属性

1、flex容器属性

容器属性有：

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

2、flex-direction

决定主轴的方向(即我的项目的排列方向)

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

属性对应如下：

row（默认值）：主轴为程度方向，终点在左端
row-reverse：主轴为程度方向，终点在右端
column：主轴为垂直方向，终点在上沿。
column-reverse：主轴为垂直方向，终点在下沿

如下图所示：

3、flex-wrap

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内我的项目是否可换行

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

属性对应如下：

nowrap（默认值）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
默认状况是不换行，但这里也不会任由元素间接溢出容器，会波及到元素的弹性伸缩

如下图所示：

4、flex-flow

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

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

5、justify-content

定义了我的项目在主轴上的对齐形式

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

属性对应如下：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，我的项目之间的距离都相等
space-around：两个我的项目两侧距离相等

如下图所示：

6、align-items

定义我的项目在穿插轴上如何对齐

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

属性对应如下：

flex-start：穿插轴的终点对齐
flex-end：穿插轴的起点对齐
center：穿插轴的中点对齐
baseline: 我的项目的第一行文字的基线对齐
stretch（默认值）：如果我的项目未设置高度或设为auto，将占满整个容器的高度

<style>#main {  width: 400px;  height: 100px;  border: 1px solid #c3c3c3;  display: flex;  align-items: flex-end;}#main div {  height: 50px;  flex-grow: 0;  flex-shrink: 0;  flex-basis: 50px;  }</style>

如下图所示：

7、align-content

定义了多根轴线的对齐形式。如果我的项目只有一根轴线，该属性不起作用（需多列能力起作用）

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

属性对应如吓：

flex-start：与穿插轴的终点对齐
flex-end：与穿插轴的起点对齐
center：与穿插轴的中点对齐
space-between：与穿插轴两端对齐，轴线之间的距离均匀散布
space-around：每根轴线两侧的距离都相等。所以，轴线之间的距离比轴线与边框的距离大一倍
stretch（默认值）：轴线占满整个穿插轴

<style>#main {  width: 200px;  height: 100px;  border: 1px solid #c3c3c3;  display: flex;  flex-wrap: wrap;  align-content:  flex-end;}#main div {  height: 50px;  flex-grow: 0;  flex-shrink: 0;  flex-basis: 50px;  }</style>

效果图如下：