0. 前言
传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
网上的图片.jpg
1. 基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
2. 标签属性
容器的属性
flex-direction: row | row-reverse | column | column-reverse;
/主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上 /flex-wrap: nowrap | wrap | wrap-reverse;
/换行：不换行（默认） | 换行 | 换行并第一行在下方 /flex-flow: <flex-direction> || <flex-wrap>;
/主轴方向和换行简写 /justify-content: flex-start | flex-end | center | space-between | space-around;
/主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 /align-items: flex-start | flex-end | center | baseline | stretch;
/*交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） */align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）/
项目的属性
order: <integer>;
/排序：数值越小，越排前，默认为0/flex-grow: <number>; /* default 0 /
/放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）*/flex-shrink: <number>; /* default 1 /
/缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）*/flex-basis: <length> | auto; /* default auto /
/固定大小：默认为0，可以设置px值，也可以设置百分比大小*/flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，/align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满 */
3. 代码实现
3.1 容器的属性
一、flex-direction
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;
} ul,li{ list-style: none;
} ul{ width: 500px; height: 300px; border: 2px solid black; display: flex;
} li{ width: 80px; height: 50px; border: 2px solid black; color: white; background-color: red; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>flex-direction: row
ul:nth-of-type(1){ /* *主轴方向：左到右（默认） */
flex-direction: row;
}
图片.png
flex-direction: row-reverse
ul:nth-of-type(2){ /*主轴方向：右到左*/
flex-direction: row-reverse;
}
图片.png
flex-direction: column
ul:nth-of-type(3){ /*主轴方向：上到下*/
flex-direction: column;
}
图片.png
flex-direction: column-reverse
ul:nth-of-type(4){ /*主轴方向：下到上*/
flex-direction: column-reverse;
}
图片.png
二、flex-wrap
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;
} ul,li{ list-style: none;
} ul{ width: 500px; height: 300px; border: 2px solid black; display: flex;
} li{ width: 80px; height: 50px; border: 2px solid black; color: white; background-color: red; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body></html>flex-wrap: nowrap
ul:nth-of-type(1){ /*换行：不换行（默认）*/
flex-wrap: nowrap;
}
图片.png
flex-wrap: wrap
ul:nth-of-type(2){ /* 换行 */
flex-wrap: wrap;
}
图片.png
flex-wrap: wrap-reverse
ul:nth-of-type(3){ /* 换行 并第一行在下方*/
flex-wrap: wrap-reverse;
}
图片.png
三、flex-shrink
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;
} ul,li{ list-style: none;
} ul{ width: 500px; height: 300px; border: 2px solid black; display: flex;
} li{ width: 80px; height: 50px; border: 2px solid black; color: white; background-color: red; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>justify-content: flex-start
ul:nth-of-type(1){ /* *主轴方向：左对齐（默认） */
justify-content: flex-start;
}
图片.png
justify-content: flex-end
ul:nth-of-type(2){ /* *主轴方向：右对齐 */
justify-content: flex-end;
}
图片.png
justify-content: center
ul:nth-of-type(3){ /* *主轴方向：居中对齐 */
justify-content: center;
}
图片.png
justify-content: space-between
ul:nth-of-type(4){ /* *主轴方向：两端对齐 */
justify-content: space-between;
}
图片.png
justify-content: space-around
ul:nth-of-type(5){ /* *主轴方向：平均分布 */
justify-content: space-around;
}
图片.png
四、align-items
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;
} ul,li{ list-style: none;
} ul{ width: 500px; height: 300px; border: 2px solid black; display: flex;
} li{ width: 80px; /*height: 50px;*/
border: 2px solid black; color: white; background-color: red; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li style="line-height: 80px;">2</li>
<li>3</li>
<li style="line-height: 80px;">4</li>
<li>5</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>align-items: flex-start
ul:nth-of-type(1){ /* 交叉轴对齐方式：顶部对齐 */
align-items: flex-start;
}
图片.png
align-items: flex-end
ul:nth-of-type(2){ /* 底部对齐 */
align-items: flex-end;
}
图片.png
align-items: center
ul:nth-of-type(3){ /*居中对齐 */
align-items: center;
}
图片.png
align-items: baseline
ul:nth-of-type(4){ /* 文本基线对齐 */
align-items: baseline;
}
图片.png
align-items: stretch
ul:nth-of-type(5){ /*如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） */
align-items: stretch;
}
图片.png
五、align-content
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{ padding: 0; margin: 0;
} ul,li{ list-style: none;
} ul{ width: 500px; height: 300px; border: 2px solid black; display: flex;
} li{ width: 80px; /*height: 50px;*/
border: 2px solid black; color: white; background-color: red; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body></html>align-content: flex-start
ul:nth-of-type(1){ flex-wrap: wrap; /*多主轴对齐： 顶部对齐*/
align-content: flex-start;
}
图片.png
align-content: flex-end
ul:nth-of-type(2){ flex-wrap: wrap; /*底部对齐*/
align-content: flex-end;
}
图片.png
align-content: center
ul:nth-of-type(3){ flex-wrap: wrap; /*居中对齐*/
align-content: center;
}
图片.png
align-content: space-between
ul:nth-of-type(4){ flex-wrap: wrap; /*上下对齐并铺满*/
align-content: space-between;
}
图片.png
align-content: space-around
ul:nth-of-type(5){ flex-wrap: wrap; /*均匀分布 上下间距相同*/
align-content: space-around;
}
图片.png
align-content: stretch
ul:nth-of-type(6){ flex-wrap: wrap; /*轴线占满整个交叉轴 （默认）*/
align-content: stretch;
}
图片.png
3.2 项目的属性
一、order
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>01_order</title>
<style type="text/css">
*{ margin: 0; padding: 0;
} ul,li{ list-style: noen;
} ul{ width:500px; height: 300px; border: 2px solid black; display: flex;
} li{ list-style: none; width: 80px; height: 50px; border: 2px solid black; color: white; background: orangered; font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>ul li:nth-of-type(2){ /*order: integer(最大值);
* 排序：数值越小，越排前，默认为0*/
order:2 ;
}ul li:nth-of-type(5){ order: 4;
}
图片.png
二、flex-grow
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>02_flex-grow</title>
<style>
*{ margin: 0; padding: 0;
} ul,li{ list-style: noen;
} ul{ width:800px; height: 300px; border: 2px solid black; display: flex;
} li{ list-style: none; width: 80px; height: 50px; border: 2px solid black; color: white; background: orangered; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>ul li:nth-of-type(1){ /*放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）*/
flex-grow: 1;
} ul li:nth-of-type(3){ flex-grow:2 ;
}
图片.png
三、flex-shrink
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>03_flex-shrink</title>
<style type="text/css">
*{ margin: 0; padding: 0;
} ul,li{ list-style: noen;
} ul{ width:500px; height: 300px; border: 2px solid black; display: flex;
} li{ list-style: none; width: 80px; height: 50px; border: 2px solid black; color: white; background: orangered; /*font-size: 30px;*/
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body></html>ul li:nth-of-type(1){ /*缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
* 如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）*/
flex-shrink: 0;
}
ul li:nth-of-type(3){ flex-shrink:3 ;
}
ul li:nth-of-type(5){ flex-shrink: 5;
}
图片.png
四、flex-basis
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>04_flex-basis</title>
<style type="text/css">
*{ margin: 0; padding: 0;
} ul,li{ list-style: noen;
} ul{ width:800px; height: 300px; border: 2px solid black; display: flex;
} li{ list-style: none; width: 80px; height: 50px; border: 2px solid black; color: white; background: orangered; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body></html>ul li:nth-of-type(1){ /*flex-basis: <length> | auto;*/ /* default auto */
/*固定大小：默认为0，可以设置px值，也可以设置百分比大小*/
flex-basis:300px;
}
ul li:nth-of-type(3){ flex-basis: 20%;
}
ul li:nth-of-type(5){ flex-basis: auto;
}
图片.png
五、align-self
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>05_align-self</title>
<style type="text/css">
*{ margin: 0; padding: 0;
} ul,li{ list-style: noen;
} ul{ width:500px; height: 300px; border: 2px solid black; display: flex;
} li{ list-style: none; width: 80px; /*height: 50px;*/
border: 2px solid black; color: white; background: skyblue; font-size: 30px;
} </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body></html>ul li:nth-of-type(1){ /*单独对齐方式： 自动（默认）*/
align-self: auto;
}
ul li:nth-of-type(2){
/*顶部对齐*/
align-self: flex-start;
}
ul li:nth-of-type(3){ /*底部对齐*/
align-self: flex-end;
}
ul li:nth-of-type(4){ /*居中对齐*/
align-self: center;
}
ul li:nth-of-type(5){ height:100px; /*文本基线对齐*/
align-self: baseline;
}
ul li:nth-of-type(6){ /* flex-flow: wrap;*/
/*上下对齐并铺满*/
align-self: stretch;
} ul li:nth-of-type(7){ height: 30px; line-height: 50px; align-self: baseline;
}
图片.png
4. 结束语
这写的很乱，我看着都乱凑合看吧！！！
作者：旧丶时候
链接：https://www.jianshu.com/p/20d226c57f25
随时随地看视频
