flex布局
文章目录
- 前言
- 一、flex布局体验
- 二、flex布局原理
- 三、flex布局父项常见属性
-
- 1.flex-direction设置主轴的方向
- 2.justify-content主轴上子元素排列方式
- 3.flex-wrap设置子元素是否换行
- 4.align-items侧轴上的子元素排列方式（单行）
- 5.align-content侧轴子元素排列方式（多行）
- 6.flex-flow复合属性
- 四、flex布局子项常见属性
-
- 1.flex属性
- 2.align-self属性
- 3.order属性
- 总结
前言
这部分学习flex布局，还是通过写一个移动端网页进行练习，这里就只记录理论知识啦。
提示：以下是本篇文章正文内容，下面案例可供参考
一、flex布局体验
传统布局：
（1）兼容性好
（2）布局繁琐
（3）局限性，不能在移动端很好的布局
flex布局：
（1）操作方便，布局极为简单，移动端应用广泛
（2）pc端浏览器支持情况较差
（3）IE11或更低版本，不支持或仅部分支持
建议：
（1）pc端页面使用传统布局
（2）移动端或者是不考虑兼容性问题的pc端，使用flex弹性布局
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
width: 800px;
height: 200px;
background-color: pink;
}
div span {
width: 150px;
height: 100px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
二、flex布局原理
采用flex布局元素，成为flex容器，简称容器。他的所有子元素自动称为容器成员，成为flex项目，简称项目。
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
三、flex布局父项常见属性
1.flex-direction设置主轴的方向
默认主轴方向就是x轴方向，水平向右；侧轴方向就是y轴方向，垂直向下。
注意：主轴和侧轴是会发生变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。子元素是跟着主轴来排列的。
代码如下（示例）：
/* 默认主轴方向从左往右 */
flex-direction: row;
/* 主轴方向从右往左 */
flex-direction: row-reverse;
/* 主轴方向从上往下 */
flex-direction: column;
/* 主轴方向从下往上 */
flex-direction: column-reverse;
2.justify-content主轴上子元素排列方式
代码如下（示例）：
/* 从主轴开始位置对齐 */
justify-content: flex-start;
/* 从主轴结束位置对齐 */
justify-content: flex-end;
/* 位于主轴居中对齐 */
justify-content: center;
/* 平分主轴剩余空间 */
justify-content: space-around;
/* 两边贴边对齐，剩余子项目平分剩余空间 */
justify-content: space-between;
3.flex-wrap设置子元素是否换行
代码如下（示例）：
/* 默认不换行 */
flex-wrap: nowrap;
/* 换行进行显示 */
flex-wrap: wrap;
4.align-items侧轴上的子元素排列方式（单行）
代码如下（示例）：
/* 默认侧轴上从上往下排列 */
align-items: flex-start;
/* 从下往上加载 */
align-items: flex-end;
/* 居中加载 */
align-items: center;
/* 拉伸 */
align-items: stretch;
5.align-content侧轴子元素排列方式（多行）
代码如下（示例）：
/* 侧轴整体位于开始位置 */
align-content: flex-start;
/* 侧轴整体位于结束位置 */
align-content: flex-end;
/* 侧轴位于居中位置 */
align-content: center;
/* 侧轴拉伸 */
align-content: stretch;
/* 平均分布 */
align-content: space-around;
/* 上下对齐，剩余空间给剩下的子项目平局分布 */
align-content: space-between;
总结：
align-items属性只适合单行，只有上对齐，下对齐，居中和拉伸；
align-content属性适合多行，有上对齐，下对齐，居中，拉伸以及平均分配剩余空间的属性值。
6.flex-flow复合属性
代码如下（示例）：
/* flex-direction: row; */
/* 换行进行显示 */
/* flex-wrap: wrap; */
flex-flow: row wrap;
四、flex布局子项常见属性
1.flex属性
子项目分配父盒子的剩余空间，属性值为数字，1代表占总分中的一份，默认值为0。
代码如下（示例）：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 80%;
height: 80px;
margin: 10px auto;
background-color: pink;
}
section div:nth-child(1),section div:nth-child(3) {
width: 80px;
height: 80px;
background-color: purple;
}
section div:nth-child(2) {
flex: 1;
height: 80px;
background-color: salmon;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
效果展示：
2.align-self属性
允许单个子项目有与其他子项目不同的对齐方式。默认值为auto，表示继承父元素的align-items，如果没有父元素等同于stretch。
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
width: 800px;
height: 500px;
background-color: pink;
/* 默认主轴方向从左往右 */
flex-direction: row;
justify-content: center;
align-items: flex-start;
}
div span {
width: 150px;
height: 100px;
background-color: rebeccapurple;
}
div span:nth-child(2) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
效果展示
3.order属性
定义项目在加载时，有自己的先后顺序。属性值为数值，数字越小越靠前，默认值为0
代码如下（示例）：
div span:nth-child(2) {
/* 往前面调，属性值要小于零 */
/* order: -1; */
/* 往后调顺序 */
order: 2;
}
效果展示
总结
流式布局就学习到这里啦，自己做一个项目来进行练习，这里就不展示了。每天坚持学习前端。
