1、实现弹性布局的前提：给父元素设置display:flex;
设置弹性布局前
设置弹性布局后
2、flex-direction：确定主轴方向
row(默认)：主轴方向为水平方向，起点在左端
row-reverse：主轴方向为水平方向，起点在右端
起点在右端
column：主轴方向为垂直方向，起点在上边
主轴方向为垂直方向，起点在上边
column-reverse：主轴方向为垂直方向，起点在下边
3、flex-wrap：是否换行
nowrap(默认)：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
4、justify-content：主轴对齐方式
flex-start（默认值）：轴起点对齐
flex-end：轴终点对齐
center：居中，但没有间隔
space-between：两端对齐，中间元素间隔相等
space-around：分散对齐
space-evenly：每个元素两侧的间隔相等
5、align-items：交叉轴对齐方式
flex-start:（默认）轴起点对齐
flex-end：轴终点对齐
center：居中
主轴为分散对齐、交叉轴为居中
baseline：项目的第一行文字的基线对齐
主轴为分散对齐、交叉轴为第一行文字的基线对齐
6、align-content：调整换行对齐方式（只有多行才有效果）
主轴和交叉轴都为分散对齐
7、flex和flex-grow：分配剩余空间或者设置子元素的比例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性布局</title> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; background-color: aquamarine; display: flex; } .box div{ height: 80px; background-color: tomato; box-sizing: border-box; margin-left: 10px; } </style> </head> <body> <div class="box"> <div style=" background-color: skyblue; flex-grow: 1;">12344</div> <div style=" background-color: aqua; flex-grow: 1;">12344</div> <div style="flex-grow: 3;">12344</div> </div> </body> </html>
