css3在布局方面做了非常大的改进，使的我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向 方向：默认主轴从左向右，侧轴默认从上到下 主轴和侧轴并不是固定不变的，通过flex-direction可以互换
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> section { width: 80%; /* 用百分比可以缩放 */ height: 200px; border: 1px solid skyblue; margin: 100px auto; /* 给父级盒子添加flex属性 */ display: flex; /* 伸缩布局模式 */ } section div { /* width: 33.33%; */ height: 100%; /* flex: 1; */ /* 子盒子添加份数 不跟单位 每个人 各占一等分*/ /* float: left; */ /* margin:0 5px; 容易出问题 */ } section div:nth-child(1) { background-color: skyblue; flex: 1; } section div:nth-child(2) { background-color: purple; margin: 0 5px; flex: 2; } section div:nth-child(3) { background-color: gray; flex: 1; } </style> </head> <body> <section> <div>one</div> <div>two</div> <div>3</div> </section> </body> </html>1.flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配 min-width 最小值 min-width: 280px; 盒子最小宽度不能小于280 max-width 最大值 min-width:1280px; 最大宽度不能大于1280 2.flex-direction调整主轴方向（默认为水平方向） （flex-direction: column; 垂直排列 column-reverse 翻转 颠倒 从下向上） （flex-direction: row; 水平排列 row-reverse 对齐方式与row相反 从右到左）
4.align-items调整侧轴对齐 5.flex-wrap控制是否换行 6.align-content堆栈（由flex-wrap产生的独立行）对齐 7.flex-flow啊flex-direction、flex-wrap的简写形式 8.order控制子项目的排列顺序，正序方式排列，从小到大 需找出主轴、侧轴、方向、各属性对应的属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> section { width: 1000px; height: 300px; border: 2px solid skyblue; margin: 100px auto; display: flex; /* justify-content: flex-start; */ /* 让子元素从父容器的开头排序 */ /* justify-content: flex-end; 让子元素从父容器的后面开始排序 但是盒子的顺序不变 */ /* justify-content: center; 让子元素位于父容器中间显示 */ /* justify-content: space-between; 左右的盒子贴近父盒子，中间的平均分布空白间距 */ justify-content: space-around; /* 相当于给每个盒子添加了左右margin外边距 */ } div { width: 250px; height: 100%; } div:first-child { background-color: skyblue; } div:nth-child(2) { background-color: gray; } div:nth-child(3) { background-color: #87CEEB; } </style> </head> <body> <section> <div>one</div> <div>two</div> <div>t</div> </section> </body> </html>align-content是针对flex容器里多轴（多行）的情况，align-items是针对一行的情况进行排列 必须对父元素设置自由盒属性display: flex;并且设置排列方式为横向排列flex-direction;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用
值描述stretch默认值，项目被拉伸以适应容器center项目位于容器中心flex-start项目位于容器的开头flex-end位于容器的结尾space-between项目位于各行之间留有空白的容器内space-around项目位于各行之前、之间、之后都留有空白的容器内 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> section { width: 1000px; height: 600px; border: 2px solid skyblue; margin: 100px auto; display: flex; flex-flow: row wrap; /* 这句话必须有否者不起效果 */ /* flex-direction: row; */ /* align-content: center; */ align-content: space-around; } div { width: 250px; height: 200px; } div:first-child { background-color: skyblue; } div:nth-child(2) { background-color: gray; } div:nth-child(3) { background-color: #87CEEB; } div:nth-child(4) { background-color: purple; } div:nth-child(5) { background-color: pink; } div:nth-child(6) { background-color: purple; } div:nth-child(7) { background-color: greenyellow; } </style> </head> <body> <section> <div>one</div> <div>two</div> <div>t</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> </section> </body> </html>用css来控制盒子的前后顺序。用order就可以 都默认为0 用整数值来定义排列顺序，数值小的排在前面，大的排在后面。可以为负值，默认值为0 order: 1;
