乐趣区

关于前端:css系列flex

jiezi

一、概念

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>

效果图如下：

退出移动版