Flex 是一种布局方案。相对于传统的布局方式(浮动 + 定位),Flex 布局具有了「弹性」。这也使得在布局时更加的灵活方便了。
01. 使用 Flex
给一个元素加上 display: flex
即可指定使用 flex 布局。
div {
display: flex;
}
span {
/* 内联元素使用 inline-flex */
display: inline-flex;
}
02. 一些概念
容器:被加上 display: flex
的元素叫做容器。
项目:在 容器 中的元素叫做项目。
主轴(main axis):默认是水平的,从左到右的。见下图 main start
到 main end
。
交叉轴(cross axis):默认是垂直的,从上到下的。见下图 cross start
到 cross end
。
03. 容器选项
flex-direction: 设置主轴的方向
- row:(默认) 从左到右
- row-reverse:从右到左
- column:从上往下
- column-reverse:从下往上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul {
display: flex;
padding: 10px;
list-style: none;
background: #e0efff;
}
li {
width: 50px;
height: 50px;
font-size: 25px;
line-height: 50px;
text-align: center;
margin-right: 4px;
margin-bottom: 4px;
border: 1px solid gray;
}
ul:nth-of-type(1) {
flex-direction: row;
}
ul:nth-of-type(2) {
flex-direction: row-reverse;
}
ul:nth-of-type(3) {
height: 200px;
flex-direction: column;
}
ul:nth-of-type(4) {
height: 200px;
flex-direction: column-reverse;
}
</style>
</head>
<body>
<h3>flex-direction: row</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h3>flex-direction: row-reverse</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h3>flex-direction: column</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h3>flex-direction: column-reverse</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
flex-wrap: 设置换行方式
- nowrap:(默认) 不换行
- wrap:换行
- wrap-reverse:换行反向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul {
width: 300px;
display: flex;
padding: 10px;
list-style: none;
background: #e0efff;
}
li {
width: 80px;
height: 80px;
font-size: 25px;
line-height: 80px;
text-align: center;
margin-right: 4px;
margin-bottom: 4px;
border: 1px solid gray;
}
ul:nth-of-type(1) {
flex-wrap: nowrap;
}
ul:nth-of-type(2) {
flex-wrap: wrap;
}
ul:nth-of-type(3) {
flex-wrap: wrap-reverse;
}
</style>
</head>
<body>
<h3>flex-wrap: nowrap</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<h3>flex-wrap: wrap</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
<h3>flex-wrap: wrap-reverse</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>
flex-flow: 同时设置 flex-direction
与 flex-wrap
- 可被设置的值具体参考
flex-direction
与flex-wrap
div {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content: 设置项目在主轴上的对齐方式
- flex-start:(默认) 左对齐
- flex-end:右对齐
- center:居中对齐
- space-between:两端对齐
- space-around:每个项目间的间距一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
ul {
width: 600px;
display: flex;
padding: 10px;
list-style: none;
background: #e0efff;
}
li {
font-size: 25px;
text-align: center;
margin-right: 4px;
margin-bottom: 4px;
border: 1px solid gray;
}
ul:nth-of-type(1) {
justify-content: flex-start;
}
ul:nth-of-type(2) {
justify-content: flex-end;
}
ul:nth-of-type(3) {
justify-content: center;
}
ul:nth-of-type(4) {
justify-content: space-between;
}
ul:nth-of-type(5) {
justify-content: space-around;
}
li:nth-child(1) {
width: 40px;
height: 40px;
line-height: 40px;
}
li:nth-child(2) {
width: 80px;
height: 80px;
line-height: 80px;
}
li:nth-child(3) {
width: 50px;
height: 50px;
line-height: 50px;
}
li:nth-child(4) {
width: 100px;
height: 100px;
line-height: 100px;
}
</style>
</head>
<body>
<h3>justify-content: flex-start</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<h3>justify-content: flex-end</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<h3>justify-content: center</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<h3>justify-content: space-between</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<h3>justify-content: space-around</h3>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</body>
</html>
align-items: 设置项目在交叉轴上的对齐方式
- flex-start:沿交叉轴起点对齐
- flex-end:沿交叉轴终点对齐
- center:沿交叉轴中点对齐
- baseline:与项目第一行文字的基线对齐
- stretch:(默认) 未设置高度的项目会沾满整个容器
align-content: 设置多行项目时的对齐方式
- flex-start:沿交叉轴起点对齐
- flex-end:沿交叉轴终点对齐
- center:沿交叉轴中点对齐
- space-between:两端对齐
- space-around:平均分配空间
- stretch:(默认) 占满整个交叉轴
04. 项目选项
order: 设置项目排列顺序,从小到大,默认为 0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body > div {
width: 300px;
display: flex;
border: 1px solid #bbb;
}
div > div {
color: white;
margin: 5px;
width: 60px;
height: 60px;
font-size: 25px;
line-height: 60px;
text-align: center;
background: #00bcd4;
}
div > div:nth-child(1) {
order: 1;
}
div > div:nth-child(3) {
order: 9;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>0</div>
<div>9</div>
</div>
</body>
</html>
flex-grow: 设置项目放大比例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body > div {
width: 500px;
display: flex;
border: 1px solid #bbb;
}
div > div {
color: white;
width: 60px;
height: 60px;
font-size: 25px;
line-height: 60px;
text-align: center;
background: #00bcd4;
outline: 1px solid gray;
}
#avg > div:nth-child(1) {
flex-grow: 1;
}
#avg > div:nth-child(2) {
flex-grow: 1;
}
#avg > div:nth-child(3) {
flex-grow: 1;
}
#diff > div:nth-child(1) {
flex-grow: 1;
}
#diff > div:nth-child(2) {
flex-grow: 3;
}
#diff > div:nth-child(3) {
flex-grow: 5;
}
</style>
</head>
<body>
<h2>默认值0</h2>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
<h2>设置为1,均分</h2>
<div id="avg">
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<h2>设置不同的值</h2>
<div id="diff">
<div>1</div>
<div>3</div>
<div>5</div>
</div>
</body>
</html>
flex-shrink: 设置项目缩小比例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body > div {
width: 250px;
display: flex;
border: 1px solid #bbb;
}
div > div {
color: white;
width: 100px;
height: 100px;
font-size: 25px;
line-height: 100px;
text-align: center;
background: #00bcd4;
outline: 1px solid gray;
}
#zero > div:nth-child(1),
#zero > div:nth-child(2),
#zero > div:nth-child(3) {
flex-shrink: 0;
}
#zoom > div:nth-child(1) {
flex-shrink: 0;
}
#zoom > div:nth-child(3) {
flex-shrink: 0;
}
</style>
</head>
<body>
<h2>默认值1,全缩放</h2>
<div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
<h2>设置为0,全不缩放</h2>
<div id="zero">
<div>0</div>
<div>0</div>
<div>0</div>
</div>
<h2>只缩放某元素</h2>
<div id="zoom">
<div>0</div>
<div>1</div>
<div>0</div>
</div>
</body>
</html>
flex-basis: 设置项目基准值
- auto:(默认) 项目大小
浏览器会根据 flex-basis
计算伸缩比例。若设置为 auto
且未设置 width
,则是项目内内容所占据的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body > div {
width: 250px;
display: flex;
border: 1px solid #bbb;
}
div > div {
color: white;
width: 100px;
height: 100px;
font-size: 25px;
line-height: 100px;
text-align: center;
background: #00bcd4;
outline: 1px solid gray;
}
div > div:nth-child(2) {
flex-basis: 500px;
}
</style>
</head>
<body>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</body>
</html>
align-self: 为某个项目单独设置 align-items
- auto:(默认) 继承父元素的
align-items
属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body > div {
width: 400px;
height: 100px;
display: flex;
align-items: center;
border: 1px solid #bbb;
}
div > div {
color: white;
margin: 5px;
width: 60px;
font-size: 25px;
text-align: center;
background: #00bcd4;
}
div > div:nth-child(1) {
height: 40px;
line-height: 40px;
}
div > div:nth-child(2) {
height: 60px;
line-height: 60px;
}
div > div:nth-child(3) {
height: 80px;
line-height: 80px;
}
#self {
margin-top: 10px;
}
#self div:nth-child(1) {
align-self: flex-start;
background: #ff4500;
}
</style>
</head>
<body>
<div>
<div>a</div>
<div>b</div>
<div>c</div>
</div>
<div id="self">
<div>a</div>
<div>b</div>
<div>c</div>
</div>
</body>
</html>