<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>flex</title>
<style>
.box {
background: blue;
display: flex;
display: -webkit-flex;
/* Safari */
/* flex-flow元素的排列方式从左到右还是从右到左还是从上到下还是从下到上，空间不够时是否换行，
换上一行还是到下一行由（row、column、wrap控制，-reverse可以倒序）默认从左到右，不换行*/
/*元素横排从左到右排列，不够时直接到下一行*/
flex-flow: row wrap;
/*justify-content 左右对齐方式flex-start 左对齐| flex-end 右对齐| center 居中|
space-between 两端对齐| space-around 元素边距相同*/
justify-content: flex-start;
/* align-items flex-start | flex-end | center | baseline | stretch*/
align-items: stretch;
}
.item {
background: red;
/* order顺序，数字越大，排列越靠后 */
order: 0;
/* flex 有空间时是否放大，空间不足时是否缩小，在分配多余空间之前，元素占据的
主轴空间是否为元素大小还是自定义值。默认(0,1,auto)、auto (1 1 auto) 和 none (0 0 auto)。 */
flex: auto;
height: 100px;
line-height: 100px;
font-size: 50px;
text-align: center;
/* align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 */
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
也可以边玩小游戏边学flex布局