flex (Flexible Box 模型)
flexbox 的两根轴线
flexbox有两根轴线，分别为主轴和侧轴
主轴
主轴默认的方向是从左往右,左边是起点右边是终点，主轴的方向可由 flex-direction 定义
flex-direction 的值有4个：
1. row 在一行内从左往右（默认值）
2. row-reverse 在一行内从右往左，右边是起点左边是终点
3. column 在一列内从上往下，上是起点下是终点
4. column-reverse 在一列内从下往上，下是起点上是终点
1. flex-direction:row
row 在一行内从左往右（默认值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
结果
box1
box2
box3
2. flex-direction:row-reverse
row-reverse 在一行内从右往左，右边是起点左边是终点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
flex-direction: row-reverse;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
结果
box1
box2
box3
3. flex-direction:column
column 在一列内从上往下，上是起点下是终点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
结果
box1
box2
box3
4. flex-direction:column-reverse
column-reverse 在一列内从下往上，下是起点上是终点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
结果
box1
box2
box3
侧轴
侧轴与主轴垂直，默认在从上往下
如果flex-direction的值设置为了column或者column-reverse，那么侧轴的方向就是水平方向从左往右
flex-wrap 换行
1. flex-wrap:nowrap 默认不换行
就算定义了宽度，当一行内显示不下时宽度也会均分
box1
box2
box3
box4
box5
box6
box7
box8
2. flex-wrap:wrap 换行
box1
box2
box3
box4
box5
box6
box7
box8
3. flex-wrap:wrap-reverse 换行并反向
box1
box2
box3
box4
box5
box6
box7
box8
flex-flow 反向和换行的简写
flex-flow: row-reverse wrap
box1
box2
box3
box4
box5
box6
box7
box8
justify-content 主轴元素对齐方式
1.justify-content: space-between
在主轴方向各元素的中间留白
box1
box2
box3
2.justify-content: space-around
在各元素的周围留白
box1
box2
box3
3.justify-content: space-evenly
均匀排列每个元素，每个元素之间的间隔相等
box1
box2
box3
4.justify-content: flex-start
让元素都往主轴的起点靠
box1
box2
box3
5.justify-content: flex-end
让元素都往主轴的终点靠
box1
box2
box3
6.justify-content: center
让元素都往主轴的中线靠
box1
box2
box3
align-items 侧轴对齐方式
1.align-items: center
让元素都往侧轴的中线靠
box1
box2
box3
2.align-items: flex-start
让元素往侧轴的起点靠
box1
box2
box3
3.align-items: flex-end
让元素往侧轴的终点靠
box1
box2
box3
4.align-items: baseline
让元素基于文字的基线对齐
让元素都往主轴的终点靠
box1
box2
box3
align-content 换行后侧轴的对齐方式
未换行时使用无效
align-content: center
box1
box2
box3
box4
box5
box6
box7
box8
对比下align-items:center在换行时的效果
box1
box2
box3
box4
box5
box6
box7
box8
align-content: flex-start
box1
box2
box3
box4
box5
box6
box7
box8
对比下align-items:flex-start在换行时的效果
box1
box2
box3
box4
box5
box6
box7
box8
align-content: flex-end
box1
box2
box3
box4
box5
box6
box7
box8
对比下align-items:flex-end 在换行时的效果
box1
box2
box3
box4
box5
box6
box7
box8
总结在换行后使用 align-items 换行中间有间距而 align-content 没有
align-content: space-between
在侧轴方向各元素的中间留白
box1
box2
box3
box4
box5
box6
box7
box8
align-content: space-around
在侧轴方向各元素的周围留白
box1
box2
box3
box4
box5
box6
box7
box8
flex items属性
flex-grow 增长比例（将留白全部分配给box1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
flex-grow: 1;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
box1
box2
box3
flex-shrink 收缩比例（当空间不够时，box1的收缩比例是其他元素的2倍)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: #333;
flex-shrink: 2;
}
.box2 {
width: 100px;
height: 100px;
background: #444;
}
.box3 {
width: 100px;
height: 100px;
background: #555;
}
.box4 {
width: 100px;
height: 100px;
background: #666;
}
.box5 {
width: 100px;
height: 100px;
background: #777;
}
.box6 {
width: 100px;
height: 100px;
background: #888;
}
.box7 {
width: 100px;
height: 100px;
background: #999;
}
.box8 {
width: 100px;
height: 100px;
background: #aaa;
}
.paterBox {
display: flex;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
</div>
</body>
</html>
box1
box2
box3
box4
box5
box6
box7
box8
flex-basis 默认主轴方向上的size（默认大小为100px)
默认方向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.paterBox[class*="box"]{
flex-basis: 100px
border:1px solid #ddd;
}
.paterBox {
display: flex;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
<div class="box6">box6</div>
<div class="box7">box7</div>
<div class="box8">box8</div>
</div>
</body>
</html>
box1
box2
box3
box4
box5
box6
box7
box8
添加column
.paterBox {
display: flex;
flex-direction: column;
}
box1
box2
box3
box4
box5
box6
box7
box8
结论 flex-basis，定义的是主轴方向的值，如果改变主轴方向，那么这个值的方向也会随主轴方向改变
flex (flex-grow,flex-shrink,flex-basis的缩写)
order 改变元素的展示顺序
- order:-1向左移动1位
- order：1向右移动1位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
order: -1;
}
.box3 {
width: 100px;
height: 100px;
background: green;
}
.paterBox {
display: flex;
flex-direction: row-reverse;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
box1
box2
box3
align-self 改变自身的对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.box1 {
width: 100px;
height: 100px;
background: red;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
order: -1;
}
.box3 {
width: 100px;
height: 100px;
background: green;
align-self: flex-end;
}
.paterBox {
display: flex;
justify-content: center;
background: #ccc;
height: 300px;
}
</style>
</head>
<body>
<div class="paterBox">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
box1
box2
box3
