1。关于flex布局
我们知道当并列书写多个div标签，它们会纵向向下排位，如果我们想将多个div并列成一排，就得借助position，float，或display属性，这便是传统的盒模型做法。
父项属性
1.flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。
column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
display: flex;
flex-direction: column-reverse;
/* flex-direction: row-reverse; */
}
span {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span><span>2</span><span>3</span>
</div>
</body>
2.flex-wrap属性
取值：nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
div {
width: 300px;
height: 300px;
background-color: aqua;
display: flex;
/* nowrap 默认不换行 */
/* wrap换行 */
/* wrap-reverse 从下到上 */
flex-wrap: wrap-reverse;
}
span {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。
3.flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
display: flex;
flex-flow: row-reverse;
}
span {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
</body>
4.justify-content属性
取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
div { width: 600px; height: 600px; background-color: aqua; display: flex; /* 左对齐 flex-start 默认值*/ /* justify-content: flex-start; / / 居中对齐 / / justify-content: center; / / 右对齐 / / justify-content: flex-end; / / space-between为左右两端对齐 / / justify-content: space-between; */
/* space-around 左右两侧项目到容器间距的2倍 / / justify-content: space-around; */ /*space-evenly 平均分配了剩余宽度 */ justify-content: space-evenly; }
span { width: 100px; height: 100px; background-color: pink; }
+0
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
5.align-items属性
取值：flex-start | flex-end | center | baseline | stretch(默认)
div { width: 600px; height: 600px; background-color: pink; display: flex; /* 默认stretch即如果项目没设置高度 / / align-items: stretch; / / flex-end与之相反 / / align-items: flex-end; / / 纵轴中心位置排列 center / / align-items: center; */ align-items: baseline; }
span { width: 100px; height: 100px; background-color: aqua; display: flex; justify-content: center; align-items: center; }
span:nth-child(2) { width: 200px; height: 200px; }
div {
width: 600px;
height: 600px;
background-color: pink;
display: flex;
/* 默认stretch即如果项目没设置高度 */
align-items: stretch;
}
span {
width: 100px;
/* height: 100px; */
background-color: aqua;
}
</style>
</head>
<body>
<div><span>1</span><span>2</span><span>3</span></div>
</body>
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。
6.align-content
取值：
1lex-start
2. flex-end
3. center
4. space-between
5 space-around
6 space-evenly
7. stretch(默认);
<style>
div {
width: 600px;
height: 600px;
background-color: aqua;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
/* 下对齐 */
/* align-content: flex-end; */
/* 上对齐 */
/* align-content: flex-start; */
/* 中间对齐 */
/* align-content: center; */
/* 两侧缝隙较小 中间相等 */
/* align-content: space-around; */
/* 贴紧两边 中间缝隙相等 */
/* align-content: space-between; */
/* 两侧和中间的缝隙相等 */
/* align-content:space-evenly ; */
}
span {
align-content: center;
justify-content: center;
display: flex;
width: 100px;
height: 30px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>
子项属性
1.flex
取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
display: flex;
}
span {
/* flex 把父项的宽度平分 */
flex: 1;
width: 50px;
height: 50px;
background-color: pink;
}
span:nth-child(2) {
flex: 2;
background-color: red;
}
</style>
</head>
<body>
<div>
<span>1</span><span>3</span><span>1</span>
</div>
