弹性布局Flexbox
弹性布局（flexible box）模块目的是提供一个更加有效的方式来布置对齐和分布在容器之间的各项内容，即便它们的大小是未知或者动态变化的。 弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间的能力。可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
1.弹性布局Flexbox 基本概念
用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
height: 150px;
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
}
</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</body>
</html>
效果如下
display: flex;/*设置为弹性布局*/
display: flex;设置为弹性布局，默认沿主轴排列。
2.弹性布局Flexbox 基本属性
1.flex-direction 属性
设置弹性容器内的项目的方向。（默认横向）
column 值设置垂直堆叠 flex 项目（从上到下）：
.body{
display: flex;/*设置为弹性布局*/
flex-direction: column;
/*column 值设置垂直堆叠 flex 项目（从上到下）：*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
效果如下
column-reverse 值垂直堆叠 flex 项目（但从下到上）：
.body{
display: flex;/*设置为弹性布局*/
flex-direction: column-reverse;/*column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
效果如下
row-reverse 值水平堆叠 flex 项目（但从右到左）：
.body{
display: flex;/*设置为弹性布局*/
flex-direction: row-reverse;/*row-reverse 值水平堆叠 flex 项目（但从右到左）*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
row 值水平堆叠 flex 项目（从左到右）<默认效果>：
.body{
display: flex;/*设置为弹性布局*/
flex-direction: row;/*row 值水平堆叠 flex 项目（从左到右）<默认效果>*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
效果如图
2.flex-wrap 属性
以下是未加入flex-wrap 属性的代码和效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
height: 150px;
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
}
</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
<div class="div">5</div>
<div class="div">7</div>
<div class="div">8</div>
<div class="div">9</div>
</body>
</html>
效果图
以下是加入flex-wrap 属性：
wrap 值规定 flex 项目将在必要时进行换行：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
flex-wrap: wrap;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
nowrap 值规定将不对 flex 项目换行（默认）：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
flex-wrap: nowrap;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
flex-wrap: wrap-reverse;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
3.flex-flow 属性
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
flex-flow: row wrap;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
4.justify-content 属性
justify-content属性定义了项目在主轴上的对齐方式。
justify-content 属性用于对齐 flex 项目
center 值将 flex 项目在容器的中心对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: center;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
height: 150px;
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
}
</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
<!-- <div class="div">4</div>
<div class="div">5</div>
<div class="div">7</div>
<div class="div">8</div>
<div class="div">9</div> -->
</body>
</html>
如图
flex-start 值将 flex 项目在容器的开头对齐（默认）
flex-end 值将 flex 项目在容器的末端对齐：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: flex-end;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
space-around 值显示行之前、之间和之后带有空格的 flex 项目（简单来说就是行内的每个flex项目前后平分这一行的空格）：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: space-around;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
space-between 值显示行之间有空格的 flex 项目：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: space-between;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
5.align-items 属性
align-items 属性用于垂直对齐 flex 项目。
center 值将 flex 项目在容器中间对齐（即垂直居中）：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: space-between;
align-items: center;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
如图
flex-start 值将 flex 项目在容器顶部对齐（左上角对齐）：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: space-between;
align-items: flex-start ;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
flex-end 值将弹性项目在容器底部对齐（左下角对齐）：
.body{
display: flex;/*设置为弹性布局*/
/* flex-direction: row-reverse;column-reverse 值垂直堆叠 flex 项目（但从下到上）*/
/* flex-wrap: wrap-reverse;*/
/* flex-flow: row wrap;*/
justify-content: space-between;
align-items: flex-end ;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
stretch 值拉伸 flex 项目以填充容器（默认）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
align-items: stretch;
/* width: 800px;*/
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
/* height: 150px;*/
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
}
</style>
</head>
<body class="body">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</body>
</html>
注意哦！
flex 项目的weight和height属性要缺一个哦，不然拉伸哦。
如图
baseline 值使 flex 项目基线对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
width: 800px;
align-items: baseline;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
height: 150px;
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
font-size: 20px;//文本基线
}
</style>
</head>
<body class="body">
<div class="div"><h1>1</h1></div>
<div class="div"><h6>2</h6></div>
<div class="div">3</div>
</body>
</html>
注意哦！该例使用不同的 font-size 来演示项目已按文本基线对齐
如图
6.align-content 属性
align-content 属性用于对齐弹性线。
不同的align-content 属性对比
stretch ：
默认值。元素被拉伸以适应容器。
各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
center ：
元素位于容器的中心。
各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）
flex-start ：
元素位于容器的开头。
各 行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。
flex-end：
元素位于容器的结尾。
各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。
space-between：
元素位于各行之间留有空白的容器内。
各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。
space-around ：
元素位于各行之前、之间、之后都留有空白的容器内。
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。
7.完美的居中
将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局</title>
<style type="text/css">
.body{
display: flex;/*设置为弹性布局*/
justify-content: center;
align-items: center;
width: 800px;
height: 800px;
border: 1px solid black;
overflow:hidden;/*内容会被修剪，并且其余溢出内容是不可见的*/
}
.div{
width: 150px;
height: 150px;
background-color: #34cd45;
color:white;
text-align: center;
font-size: 100px;
margin: 10px;
}
</style>
</head>
<body class="body">
<div class="div"></div>
</body>
</html>
如图
8.用于弹性项目的属性有：
order
flex-grow
flex-shrink
flex-basis
flex
align-self