<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/new_file.css"/>
</head>
<body>
<div class="flex-container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C">C</div>
<!-- <div class="box D">D</div>
<div class="box E">E</div> -->
</div>
</body>
</html>
.flex-container{
display: flex;
background-color: blue;
width: 180px;
height: 300px;
flex-direction: row; /* 定义item的排列顺序 */
justify-content: flex-start; /* 主轴 */
align-items: center; /* 交叉轴 */
flex-wrap: nowrap; /* 分行 */
/* flex-flow: column nowrap; /* item排列顺序和分行组合缩写 */ */
/* align-content: ; */ /* 当设定为(flex-wrap: wrap;)时,多于一行flex-items时行与行的对齐方式. */
}
.box{
width: 90px;
height: 60px;
/* flex-basis: px; */ /*flex-basis 设定 flex-item 的主轴方向item大小的*/
/* flex-grow: 1; */ /* 当主轴空间有剩余，item占的比例，大概是这个意思 */
flex-shrink: 22; /* 当不分行且主轴空间小于item之和时，item的缩小倍数，大概是 默认是1*/
background-color: #eee;
text-align: center;
line-height: 60px;
border-radius: 4px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, .18);
font-size: 2em;
}
.A{background-color: aqua;} /* order -> 类似item序列号 默认均为0 */
.B{background-color: antiquewhite;}
.C{background-color: aquamarine;}
.D{background-color: azure;}
.E{background-color: cadetblue;}
/* align-self用来覆写flex container 的align-items设定 */
/** flex = flex-grow + flex-shrink + flex-basis **/
/* flex item 会岁flex container的宽度平均分配空间去扩大或缩小
flex container有剩余空间时同步扩大
flex-grow是设定flex-item的扩大比例 0是不扩大
flex-shrink是flex-item的缩小比例 0是不缩小
flex-basis是主轴方向的基础大小
*/
原文：https://www.cnblogs.com/dafran/p/12874204.html