0. 前言
传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
网上的图片.jpg
1. 基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
2. 标签属性
容器的属性
1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上
flex-direction: row | row-reverse | column | column-reverse
2. 换行：不换行（默认） | 换行 | 换行并第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse
3.主轴方向和换行简写
flex-flow: <flex-direction> || <flex-wrap>
4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布
justify-content: flex-start | flex-end | center | space-between | space-around
5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）
align-items: flex-start | flex-end | center | baseline | stretch
6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）
align-content: flex-start | flex-end | center | space-between | space-around | stretch
项目的属性
1. 排序：数值越小，越排前，默认为0
order: <integer>
2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）
flex-grow: <number>; /* default 0 */
3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。）
flex-shrink: <number>; /* default 1 */
4.固定大小：默认为0，可以设置px值，也可以设置百分比大小
flex-basis: <length> | auto; /* default auto */
5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满
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. 结束语
这写的很乱，我看着都乱凑合看吧！！！
