文章目录
- 一、传统布局与flex对比
- 1.1 传统布局
- 1.2 flex布局
- 1.3 建议
- 二、flex布局原理
- 三、 flex布局常见属性
- 3.1 以下6个属性是对父元素设置的：
- 3.2 flex-direction设置主轴的方向
- 3.2.1主轴与侧轴
- 3.2.2 属性值
- 3.3 justify-content 设置主轴上子元素的排列方式
- 3.4 flex-wrap设置子元素是否换行
- 3.5 align-items侧轴上的排列方式（单行）
- 3.6 align-content侧轴上的排列方式（多行）
- 3.7 flex-flow属性
- 四、 flex布局子项常见属性
- 3.1 常见属性
- 3.2 flex属性定义子项分配剩余空间，用flex来表示占多少份
- 3.3 align-self 某一个子项在侧轴上的排列方式
- 3.4 order 子项排列顺序
一、传统布局与flex对比
1.1 传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
1.2 flex布局
- 操作方便，布局极其简单，移动端使用比较广泛
- pc端浏览器支持情况比较差
- IE11或更低版本不支持flex或仅支持部分
1.3 建议
- 如果是pc端页面布局，还是采用传统方式
- 如果是移动端或者是不考虑兼容的pc则采用flex
二、flex布局原理
- flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- lex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
三、 flex布局常见属性
3.1 以下6个属性是对父元素设置的：
- flex-direction：设置主轴的方向
- flex-wrap：是否换行
- justify-content：主轴上子元素排列方式
- align-items：侧轴上子元素排列方式（单行）
- align-content：侧轴上子元素排列方式（多行）
- flex-flow：flex-direction和flex-wrap的复合属性
3.2 flex-direction设置主轴的方向
3.2.1主轴与侧轴
- 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
- 默认主轴方向就是 x 轴方向，水平向右
- 默认侧轴方向就是 y 轴方向，水平向下
默认图示：
- 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
3.2.2 属性值
flex-direction属性决定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
相关代码以及截图如下：
1）只设置display:flex,相当于设置了flex-direction:row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex主轴</title>
<style>
div{
display: flex;
width: 600px;
height: 400px;
background-color: cornflowerblue;
}
div span{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2)flex-direction:row-reverse
3)flex-direction:column
4)flex-direction:column-reverse
3.3 justify-content 设置主轴上子元素的排列方式
注意：在使用这个属性前，确定主轴是哪个
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值从头部开始，如果主轴是X轴，则从左至右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果是X轴，则水平居中对齐） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
以下案例只针对主轴为X轴情况
1）justify-content:flex-start
2)justify-content:flex-end
3)justify-content:center
4）justify-content:space-around
5)justify-content:space-between
3.4 flex-wrap设置子元素是否换行
默认情况下，项目都排在一条线（又称‘轴线’）上，flex-warp属性定义，flex布局中默认是不换行的
| 属性值 | 说明 |
|---|---|
| nowarp | 默认不换行 |
| wrap | 换行 |
1）flex-wrap:nowrap
相关部分代码如下：
<style>
div{
display: flex;
justify-content: space-between;
width: 400px;
height: 400px;
background-color: cornflowerblue;
}
div span{
width: 120px;
height: 100px;
background-color: pink;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
浏览器效果图：
2）flex-wrap:wrap:
3.5 align-items侧轴上的排列方式（单行）
该属性设置子项在侧轴上的排列方式，在子项为单项时使用
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| fstretch | 拉伸 |
以下案例默认主轴为X轴：
1）align-items:flex-start
2)align-items:flex-end
3)align-items:center
4)align-items:stretch,子元素高度不设置
3.6 align-content侧轴上的排列方式（多行）
该属性设置子项在侧轴上的排列方式，在子项为单项时使用
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值从头部开始排列 |
| flex-end | 从尾部开始排列 |
| center | 在侧轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
以下案例只针对设置有flex-wrap:wrap情况
1）align-content:flex-start
2)align-content:flex-end;
3)align-content:center
4)align-content:space-around
5)align-content:space-between
6)allign-content:stretch
3.7 flex-flow属性
flex-flow属性是flex-direction和flex-wrap属性的复合属性
比如：
flex-grow:row wrap;
四、 flex布局子项常见属性
3.1 常见属性
- flex属性
- align-self属性
- order
3.2 flex属性定义子项分配剩余空间，用flex来表示占多少份
flex是flex-grow,flex-shrink,flex-basic三个属性的简写形式，默认值是flex：0 1 auto
1）flex-grow属性可以按比例分配剩余空间
2）flex-shrink属性指定了flex元素的收缩规则
3）flex-basic定义了该元素的空间大小，该属性默认值是auto，若设置了width，则flex-basic为width，flex-basic具有比width更高的优先级
.item{
flex:<number> ; /* defalut:0 */
}
案例：
<head>
<style>
div{
display: flex;
align-content: space-between;
/* align-content: stretch; */
width: 500px;
height: 400px;
background-color: cornflowerblue;
}
div span:nth-child(1){
width: 120px;
background-color: blueviolet;
}
div span:nth-child(2){
width: 120px;
height: 100px;
background-color: pink;
flex:1
}
div span:nth-child(3){
background-color: aqua;
width: 120px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
结果：粉色2分配剩余空间
3.3 align-self 某一个子项在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。
div span:nth-child(3){
width: 120px;
align-self: flex-end;
}
结果：
3.4 order 子项排列顺序
数值越小，排列越靠前，默认为0。
