开启flex布局只需要在外层容器设置display:flex即可。
设置后找个外层容器就是一个flex容器。所有子容器自动成为容器成员，称为flex项目。
开启flex后，里面的flex项目会自动按照main-axis水平布局
test01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 800px; height: 400px; margin: 0 auto; display: flex; border: 1px solid red; } .box div{ width: 100px; height: 100px; border: 1px solid blue; } </style> </head> <body> <div class="box"> <div id="item1"></div> <div id="item1"></div> <div id="item1"></div> </div> </body> </html>
2、容器属性
2.1 justify-content - main轴-水平布局
2.1.1 center
flex项目水平居中
2.1.2 flex-end
flex项目靠右对齐
2.1.3 space-between
flex项目两端对齐
2.1.4 space-around
flex项目两端对齐，项目间的距离是两端和容器距离的2倍。
2.1.5 space-evenly
flex项目两端对齐，项目间距和容器两端的距离相等。
2.2 align-items - cross轴-垂直布局
2.2.1 center
垂直方向居中
2.2.2 flex-end
cross轴底部对齐
2.2.3 水平、垂直居中
justify-content:center; align-items:center;
2.3 flex-direction - 项目方向
2.3.1 row-reverse
flex项目水平方向，反序排列
2.3.2 column
flex项目垂直方向，正序排列
2.3.3 column-reverse
flex项目垂直方向，反序排列
2.4 flex-wrap - 换行、换列
2.4.1 nowrap
默认值。意思是不换行、换列。
当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。
2.4.2 wrap
换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器。
3、项目属性
3.1 order
项目的排列顺序。数值越小，排列越靠前。
3.2 align-self
设置单个flex项目的对齐方式。
3.2.1 center
居中
3.2.2 flex-end
底端对齐
3.3 flex-grow
默认值为0。用于决定项目在有剩余空间的情况下是否放大。默认不放大。
注意：即使设置了宽度，如果设置了放大，那么宽度失效。
多个flex项目同时放大，如果数值越大，放大的比例也越大。
多个flex项目根据放大比例，重新分配了剩余空间。
3.4 flex-shrink
不换行、换列的情况下有效。
设置缩小。默认值为1，默认情况下，会等比例缩小，宽度失效。
设为0，表示不缩小。
数值越大，缩小的比例也越大。
3.5 flex
取值默认：0 1 auto。flex属性是 flex-grow、flex-shrink与flex-basis的简写。用于定义项目放大，缩小与宽度。
flex有两个快捷值：
auto。表示（1 1 auto）等分放大缩小。
none。表示（0 0 auto）不放大，但等分缩小。
