CSS3之flex属性
flex属性特点：
- 要在容器中定义flex属性需要在flex容器上使用display:flex属性
- 在flex容器内部没有行内、行内块、块级元素的概念，所有元素皆可设置宽高
- 在flex容器内部拥有主、侧轴（内容排列主方向，辅方向）
- 主要应用于移动端页面或者不考虑兼容的PC端页面
flex容器属性：
flex-direction:
作用：
设置flex容器的内容主轴方向
说明：
如果元素不是弹性盒对象(flex容器)内的元素，则flex-direction属性不起作用
常用值：
(row)：默认值。主轴为水平（x轴）方向，从左到右
(row-reverse)：主轴为水平（x轴）方向，从右到左
(column)：主轴为垂直（y轴）方向，从上到下
(column-reverse)：主轴为垂直（y轴）方向，从下到上
justify-content:
作用：
设置在flex容器中主轴方向上的对齐方式
说明：
如果元素不是弹性盒对象(flex容器)内的元素，则flex-direction属性不起作用
常用值：
(flex-start)：默认值，从主轴开始方向向主轴结束方向排列
(flex-end)：从主轴结束方向向主轴开始方向排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
(space-between)：两端对齐，将剩余空间平均分配，设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = (x - 1)*2m + (y(1) + … + y(x))
(space-around)：将空间平均分配，分配方式公式：设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = 2xm + (y(1) + … + y(x))
(center)：居中排列
flex-wrap:
作用：
设置flex容器中元素显示是单行或者多行
说明：
在css3中flex容器默认单行显示所有子内容（在子内容总宽度大于容器宽度时，按比例缩小子元素宽度），如果元素不是弹性盒对象的元素，则flex-wrap属性不起作用
常用值：
(nowrap)：默认值，控制所有子元素单行显示
(wrap)：控制所有子元素在总宽度超出flex容器宽度时换行显示（不会忽略并按比例缩小子元素宽度）
(wrap-reverse)：控制所有子元素在总宽度超出flex容器宽度时按flex-direction的反方向换行显示（不会忽略并按比例缩小子元素宽度）
align-items:
作用：
设置flex容器中侧轴方向上的对齐方式 （单行）
常用值：
(stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
(flex-start)：默认值，从左向右排列
(flex-end)：从右向左排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
(center)：居中排列
align-content:
作用：
设置flex容器中侧轴方向上的对齐方式 （多行）
常用值：
(stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
(flex-start)：从从主轴开始方向向主轴结束方向排列
(flex-end)：从从主轴结束方向向主轴开始方向排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
(space-between)：两端对齐，将剩余空间平均分配，设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = (x - 1)*2m + (y(1) + … + y(x))
(space-around)：将空间平均分配，分配方式公式：设总空间为l、元素单侧外边距为m、主轴方向上的每一行或列中元素个数为x、每个元素宽度分别为y(1)，y(2)…y(x)，则分配方式公式：l = 2xm + (y(1) + … + y(x))
(center)：居中排列
flex-flow:
作用：
该属性是flex-direction和flex-wrap属性的复合属性
说明：
如果元素不是弹性盒对象的元素，则flex-flow属性不起作用
常用值：
(VALUE)：flex-direction中的属性
(VALUE)：flex-wrap中的属性
flex子元素属性：
flex:
作用：
设置flex容器的子元素如何分配空间，定义该属性css3会自动计算该行或列中所有元素的该属性值总和，然后在按各自值进行分配
说明：
给不具有指定宽度的子元素分配，有宽度的不变，当总宽度改变时，这些子元素按比例缩放
常用值：
(NUMBER)：分配份数或宽度百分比
align-self:
作用：
设置子元素单独在侧轴方向上的对齐方式
说明：
align-self属性可覆盖flex容器的align-items属性
常用值：
(stretch)：默认值，元素被拉伸以适应flex容器（前提是子元素没有高度）
(flex-start)：默认值，从左向右排列
(flex-end)：从右向左排列（区别于flex-direction：…-reverse属性，不改变盒子的相对位置）
(center)：居中排列
order:
作用：
设置flex容器的子元素出现的顺序
说明：
该值在该元素所在行中相对越小，该元素的位置越靠近主轴开始方向，其他元素依次后移，如果元素不是弹性盒对象的元素，则order属性不起作用
常用值：
(NUMBER)：默认值是0
代码示例1：
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>CSS3之flex属性title>
<style type="text/css">
div {
width: 100%;
max-width: 900px;
height: 480px;
margin: 0 auto;
background-color: skyblue;
/*使用flex属性需要在flex容器上使用display:flex属性*/
display: flex;
/*设置flex容器的内容主轴方向*/
flex-direction: row;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*设置在flex容器中主轴方向上的对齐方式*/
justify-content: flex-start;
/*justify-content: flex-end;*/
/*justify-content: space-between;*/
/*justify-content: space-around;*/
/*justify-content: center;*/
/*设置flex容器中元素显示是单行或者多行*/
flex-wrap: wrap;
/*flex-wrap: nowrap;*/
/*flex-wrap: wrap-reverse;*/
/*设置flex容器中侧轴方向上的对齐方式（单行）*/
align-items: stretch;
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*设置flex容器中侧轴方向上的对齐方式（多行）*/
align-content: stretch;
/*align-content: flex-start;*/
/*align-content: flex-end;*/
/*align-content: space-between;*/
/*align-content: space-around;*/
/*align-content: center;*/
}
div span {
width: 200px;
height: 100px;
background-color: limegreen;
}
style>
head>
<body>
<div class="div1">
<span>1span>
<span>2span>
<span>3span>
<span>4span>
<span>5span>
<span>6span>
<span>7span>
<span>8span>
<span>9span>
<span>10span>
div>
<hr>
<div class="div2">
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
body>
html>
代码示例2：
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>CSS3之flex属性title>
<style type="text/css">
div {
width: 100%;
max-width: 900px;
height: 480px;
margin: 0 auto;
background-color: skyblue;
/*使用flex属性需要在flex容器上使用display:flex属性*/
display: flex;
/*设置flex容器的内容主轴方向*/
flex-direction: row;
/*设置在flex容器中主轴方向上的对齐方式*/
justify-content: space-between;
/*设置flex容器中元素显示是单行或者多行*/
flex-wrap: nowrap;
/*设置flex容器中侧轴方向上的对齐方式（单行）*/
align-items: stretch;
/*设置flex容器中侧轴方向上的对齐方式（多行）*/
align-content: stretch;
}
.div1 span:first-child {
background-color: red;
/*设置子元素对flex空间的分配方式*/
flex: 2;
}
.div1 span:nth-child(2) {
background-color: orange;
/*设置子元素单独在侧轴方向上的对齐方式*/
align-self: flex-end;
}
.div1 span:nth-child(3) {
background-color: yellow;
}
.div1 span:last-child {
background-color: limegreen;
/*设置flex容器的子元素出现的顺序*/
order: -1;
}
.div1 span {
height: 100px;
/*设置子元素对flex空间的分配方式*/
flex: 1;
}
.div2 span:first-child {
background-color: red;
}
.div2 span:nth-child(2) {
background-color: orange;
/*设置子元素对flex空间的分配方式*/
margin: 0 3%;
flex: 1;
}
/*.div2 span:nth-child(3) {
background-color: yellow;
!*设置子元素对flex空间的分配方式*!
flex: 1;
}*/
.div2 span:last-child {
background-color: limegreen;
}
.div2 span:first-child,
.div2 span:last-child {
width: 100px;
}
.div2 span {
height: 100px;
}
style>
head>
<body>
<div class="div1">
<span>1span>
<span>2span>
<span>3span>
<span>4span>
div>
<hr>
<div class="div2">
<span>1span>
<span>2span>
<span>4span>
div>
body>
html>