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>