Flex布局

1 Flex 布局

1.1 Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box {
    display: flex;
}

行内元素也可以使用 Flex 布局。

.box {
  display: inline-flex;
}

• flex： 将对象作为弹性伸缩盒显示，没有为⽗元素设置宽度，默认为100%。

• inline-flex：将对象作为内联块级弹性伸缩盒显示，⽗元素默认会根据⼦元素的宽⾼去⾃适应。

注意：flex 布局的⼦元素不会脱离⽂档流，flex 布局不⽀持 IE9 及以下的版本；IE10及以上也只是部分⽀持。

<div class="flexbox">
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
    <div class="flexbox-item"></div>
</div>

.flexbox{
    display: flex;
    height: 200px;
    background: #ffff00
}

1.2 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1.3 容器的属性

以下6个属性设置在容器上。

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

1.3.1 flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

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

有4个值。

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

<div class="flexbox">
    <div class="flexbox-item">1</div>
    <div class="flexbox-item">2</div>
    <div class="flexbox-item">3</div>
    <div class="flexbox-item">4</div>
    <div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
    <div class="flexbox-item">7</div>
    <div class="flexbox-item">8</div>
    <div class="flexbox-item">9</div>
    <div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
    <div class="flexbox-item">12</div>
    <div class="flexbox-item">13</div>
    <div class="flexbox-item">14</div>
    <div class="flexbox-item">15</div>
</div>

.flexbox {
    display: flex;
    flex-direction: column;
    height: 400px;
    background: #ffff00
}
​
.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

1.3.2 flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

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

可取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

1.3.3 flex-flow

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

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

1.3.4 justify-content

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

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

可取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等

• space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

• space-evenly：每个项目两侧的间隔相等，项目之间间隔比项目与边框的间隔相等

1.3.5 align-items

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

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

可取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• baseline：项目的第一行文字的基线对齐。

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

1.3.6 align-content

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

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

该属性可能取6个值。

• flex-start：与交叉轴的起点对齐。

• flex-end：与交叉轴的终点对齐。

• center：与交叉轴的中点对齐。

• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

• space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• space-evenly：元素间距离平均分配

• stretch（默认值）：轴线占满整个交叉轴。

1.4 弹性元素

放在容器盒⼦中的元素即为弹性元素。

• float、clear和vertical-align属性将失效

• 弹性元素均为块元素

• 绝对定位的弹性元素不参与弹性布局

1.4.1 align-self

⽤于控制单个元素在交叉轴上的排列⽅式

align-items ⽤于控制容器中所有元素的排列，⽽ align-self ⽤于控制⼀个弹性元素的交叉轴排列， 能够覆盖容器的 align-items 属性。

.box-item {
    align-self: flex-start | flex-end | center | stretch;
}

可取4个值。

• flex-start：交叉轴的起点对齐。

• flex-end：交叉轴的终点对齐。

• center：交叉轴的中点对齐。

• stretch（默认值）：将空间平均分配给元素。

<div class="flexbox">
	<div class="flexbox-item">1</div>
	<div class="flexbox-item">2</div>
	<div class="flexbox-item">3</div>
	<div class="flexbox-item">4</div>
	<div class="flexbox-item">5</div>
    <div class="flexbox-item">6</div>
	<div class="flexbox-item">7</div>
	<div class="flexbox-item">8</div>
	<div class="flexbox-item">9</div>
	<div class="flexbox-item">10</div>
    <div class="flexbox-item">11</div>
	<div class="flexbox-item">12</div>
	<div class="flexbox-item">13</div>
	<div class="flexbox-item">14</div>
	<div class="flexbox-item">15</div>
</div>

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    align-self: flex-end
}

.flexbox-item:last-child{
    align-self: center
}

1.4.2 flex-grow

控制剩余空间是否放大，默认0，即如果存在剩余空间，也不放大。适合不确定文字数量自适应宽度。

/* 为三个DIV 弹性元素设置了1、3、6 ，即宽度分成10等份，第三个元素所占宽度为(宽度/(1+3+6)) X 6。 */
.box-item.item01 {
    flex-grow: 1;
}
.box-item.item02 {
    flex-grow: 3;
}
.box-item.item03 {
    flex-grow: 6;
}

注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作⽤。 如果弹性元素设置了宽度，将把（弹性盒⼦-弹性元素宽度和）后按照 flex-grow 进⾏分配 。

<div class="flexbox">
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
	<div class="flexbox-item"></div>
</div>

.flexbox {
    display: flex;
    width: 600px;
    height: 200px;
    background: #ffff00
}

.flexbox-item:nth-child(1){
    background: #00ffff;
    flex-grow: 1
}

.flexbox-item:nth-child(2){
    background: #ff00ff;
    flex-grow: 3
}

.flexbox-item:nth-child(3){
    background: #ff0000;
    flex-grow: 6
}

1.4.3 flex-shrink

控制空间不够的时候是否缩小，默认1，即如果空间不够则缩小，可以正常展示全该展示的东西，比如icon、图片等，如果设为0，则会出现超出截断的问题。

注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作⽤。负值对该属性无效。

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 150px;
    height: 150px;
    margin: 2px;
    flex-shrink: 1;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-shrink: 0
}

.flexbox-item:last-child{
    flex-shrink: 3
}

1.4.4 flex-basis

定义了在分配多余空间之前，弹性元素占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即弹性元素的本来大小。

取值：

• ⻓度单位

• 百分⽐

flex-basis 的优先级⾼于 width、height 属性。 优先级 flex-basis 优先级⼤于 width、height。主轴⽅向。

弹性元素取值优先级高到低：

• max-width、max-height、min-width、min-height

• flex-basis

• width、height

• 内容本身的size

.flexbox {
    display: flex;
    flex-direction: row;
    height: 400px;
    background: #ffff00
}

.flexbox-item {
    width: 50px;
    height: 50px;
    margin: 2px;
    background: #00ffff
}

.flexbox-item:nth-child(1){
    flex-basis: 100px;
}

.flexbox-item:nth-child(2){
    flex-basis: 200px;
}

1.4.5 flex

flex 是 flex-grow、flex-shrink 、flex-basis 综合写法。

语法：

• flex:flex-grow flex-shrink flex-basis;

• flex:0 1 auto;(默认值)

• 后两个属性可选

注意：

• 一个值

  • 一个无单位的值会被认为 flex-grow 的值

  • 一个有效单位的宽度值，会被认为 flex-basis

• 两个值

  • 第一个值必须是：无单位数，认为是 flex-grow

  • 第二个值必须是：一个无单位数：认为是 flex-shrink；一个有效单位宽度：认为是 flex-basis

• 三个值

  • 第一个值必须是无单位数，认为是 flex-grow

  • 第二个值必须是无单位数，认为是 flex-shrink

  • 第三个值必须是有效单位宽度，认为是 flex-basis

1.4.6 order

⽤于控制弹性元素的排列顺序，默认为 order:0，数值越⼩，排列越靠前，可以负数或整数。

.item {
    order: 1;
}

1.4.7 圣杯布局

<div class="demo">
	<header class="header">头部</header>
	<section class="main">
		<aside class="left">left</aside>
		<section class="center">center</section>
		<aside class="right">right</aside>
	</section>
	<footer class="footer">底部</footer>
</div>

html,
body {
    height: 100%;
}
​
.demo {
    display: flex;
    height: 100%;
    flex-direction: column;
}
​
.main {
    display: flex;
    flex: 1;
}
​
.header,
.footer {
    height: 50px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #737070
}
​
.left,
.right {
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
​
.center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d1eccd;
}

1.4.8 双飞翼布局

* {
    margin: 0;
    padding: 0;
}
​
.container {
    height: 600px;
}
​
.main {
    background: red;
}
​
.sub {
    background: blue;
}
​
.extra {
    background: yellow;
}
​
.container {
    display: flex;
}
​
.main {
    flex-grow: 1;
}
​
.sub {
    flex: 0 0 150px;
    order: -1;
}
​
.extra {
    flex: 0 0 200px;
    order: 1;
}

<section class="container">
	<div class="main">中间栏，位于文档流的最前面</div>
	<div class="sub">sub 左边栏</div>
	<div class="extra">extra 右边栏</div>
</section>

1.4.9 弹性⽂本

⽂本节点也在弹性布局操作范围内

<div class="text">弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，弹性文本，</div>

.text {
    display: flex;
    height: 100vh;
    align-items: center;
}

1.4.10 绝对定位

绝对定位的弹性元素不参与弹性布局。

.box {
    display: flex;
    height: 200px;
    position: relative;
}

.box-item {
    flex: 1;
    border: 1px solid #bbb
}

.box-item:last-child {
    background: #00ff00;
    position: absolute;
    width: 80px;
    height: 80px;
}

<div class="box">
    <div class="box-item"></div>
    <div class="box-item"></div>
    <div class="box-item"></div>
</div>

1.4.11 ⾃动空间

在弹性布局中对元素使⽤ margin-right:auto 等形式可以⾃动撑满空间。

下例为第⼀个ul设置 margin-right:auto 表示右侧空间⾃动撑满，第⼆个ul靠近⽗元素右边界。

* {
    margin: 0;
    padding: 0
}

ul {
    list-style: none
}

.container {
    width: 600px;
    margin: 0 auto;
}

nav {
    display: flex;
    align-items: center;
    border: solid 1px green;
    height: 60px;
    background: #f3f3f3;
}

ul:nth-child(1) {
    display: flex;
    align-items: center;
    margin-right: auto;
}

ul:nth-child(1)>li {
    margin: 0 10px;
}

ul:nth-child(2) {
    display: flex;
}

ul:nth-child(2)>li {
    display: flex;
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background: #9b59b6;
}

<div class="container">
	<nav>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</nav>
</div>