花了大半天，把所有的都写一遍：
···html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
height: 150px;
}
.container {
display: flex;
}
.container {
/ 主轴方向排列是否换行的设定 /
/ flex-direction: row; /
/ flex-direction: row-reverse; /
/ flex-direction: column; /
/ flex-direction: column-reverse; /
/ flex-wrap: nowrap; /
/ flex-wrap: wrap; /
/ flex-wrap: wrap-reverse; /
/ 主轴方向排列、换行的缩写 /
flex-flow: row nowrap;
/ 主轴方向对齐方式，左中右 两端对齐 分散对齐等 /
justify-content: flex-start;
/ justify-content: flex-end; /
/ justify-content: center; /
/ justify-content: space-between; /
/ justify-content: space-around; /
/ justify-content: space-evenly; /
/ 元素在交叉轴上 上中下对齐方式 /
align-items: flex-start;
/ align-items: flex-end; /
/ align-items: center; /
/ 交叉轴项目对齐方式 /
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
}
.item {
width: 200px;
height: 50px;
background-color: cyan;
font-size: 1.5rem;
text-align: center;
align-self: auto;
/ order: 0; /
/ flex-grow: initial; /
/ flex-grow: 0; /
flex-shrink: initial;
}
.item {
flex-basis: auto;
flex-basis: 70px;
flex-basis: 20%;
flex-basis: 5rem;
}
.item:first-of-type {
/ order: 4; /
background-color: lightblue;
/ 项目独立对齐方式 /
height: inherit;
align-self: stretch;
/ flex-grow: 1; /
flex-shrink: 1;
max-width: 100px;
flex-basis: 150px;
flex: 0 1 auto;
flex: 1 1 auto;
}
.item:nth-of-type(2) {
background-color: lightcoral;
/ order: 3; /
align-self: flex-start;
/ flex-grow: 2; /
flex-shrink: 2;
flex: 0 100px;
}
.item:nth-of-type(3) {
background-color: wheat;
align-self: flex-end;
/ order: 2; /
/ flex-grow: 1; /
flex-shrink: 3;
flex: 0 0 auto;
flex: 0 0 250px;
}
.item:last-of-type {
background-color: lightsalmon;
align-self: center;
/ order: -1; /
/ flex-grow: 5; /
flex: auto;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
···