这部分学习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属性，来控制子盒子的位置和排列方式。
默认主轴方向就是x轴方向，水平向右；侧轴方向就是y轴方向，垂直向下。
注意：主轴和侧轴是会发生变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。子元素是跟着主轴来排列的。
代码如下（示例）：
/* 默认主轴方向从左往右 */
flex-direction: row;
/* 主轴方向从右往左 */
flex-direction: row-reverse;
/* 主轴方向从上往下 */
flex-direction: column;
/* 主轴方向从下往上 */
flex-direction: column-reverse;
代码如下（示例）：
/* 从主轴开始位置对齐 */
justify-content: flex-start;
/* 从主轴结束位置对齐 */
justify-content: flex-end;
/* 位于主轴居中对齐 */
justify-content: center;
/* 平分主轴剩余空间 */
justify-content: space-around;
/* 两边贴边对齐，剩余子项目平分剩余空间 */
justify-content: space-between;
代码如下（示例）：
/* 默认不换行 */
flex-wrap: nowrap;
/* 换行进行显示 */
flex-wrap: wrap;
代码如下（示例）：
/* 默认侧轴上从上往下排列 */
align-items: flex-start;
/* 从下往上加载 */
align-items: flex-end;
/* 居中加载 */
align-items: center;
/* 拉伸 */
align-items: stretch;
代码如下（示例）：
/* 侧轴整体位于开始位置 */
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属性适合多行，有上对齐，下对齐，居中，拉伸以及平均分配剩余空间的属性值。
代码如下（示例）：
/* flex-direction: row; */
/* 换行进行显示 */
/* flex-wrap: wrap; */
flex-flow: row wrap;
子项目分配父盒子的剩余空间，属性值为数字，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>
效果展示：
允许单个子项目有与其他子项目不同的对齐方式。默认值为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>
效果展示
定义项目在加载时，有自己的先后顺序。属性值为数值，数字越小越靠前，默认值为0
代码如下（示例）：
div span:nth-child(2) {
/* 往前面调，属性值要小于零 */
/* order: -1; */
/* 往后调顺序 */
order: 2;
}
效果展示
流式布局就学习到这里啦，自己做一个项目来进行练习，这里就不展示了。每天坚持学习前端。
今天讲课的时候，讲到了html中的标签的显示模式，大致分为块级标签和行内标签。...
在开发过程中，经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件，...
1.停止IIS； 2.在运行中输入反注册命令 regsvr32 /u vbscript.dll，提示成功后进...
什么是索引 索引又可以称为键(key)是存储引擎用于快速找到记录的一种数据结构。 ...
Git是一种分布式版本控制系统，通常这类系统都可以与若干远端代码进行交互。Git...
在用flex的jpegencoder对图片进行压缩的时候，exif信息会丢失，也就是图片的作者...
原理 Linux内核发送崩溃时，kdump会生成一个内核转储文件vmcore。 可以通过分析v...
文章目录 一、什么是Linux 二、什么是shell 三、shell行提示符的含义 1. shell类...
本文转载自微信公众号「SQL数据库开发」，作者丶平凡世界 。转载本文请联系SQL数...
Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非...
