```html
<style>
.flexbox{
display: flex;
flex-wrap: wrap; /* 允许item换行,默认不允许换行 */
justify-content: space-between; /* 最左和最右边的item会紧贴着边框 */
}
.flexbox .item{
width: 24%;
height: 100px;
margin-bottom: 20px;
background-color: #ccc;
box-sizing: border-box;
}
</style>
<body>
<div class="flexbox">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
```
##### justify-content 常见的对齐方式：
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
- ```css
<style>
justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */
</style>
```
- ```css
<style>
justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
</style>
```
- ```css
<style>
justify-content: flex-start; /* 从行首起始位置开始排列 */
</style>
```
- ```css
<style>
justify-content: flex-end; /* 从行尾位置开始排列 */
</style>
```
- ```css
<style>
justify-content: center; /* 居中排列 */
</style>
```
##### align-items 常见的对齐方式：
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
- ```css
<style>
align-items: center; /* 沿着交叉轴方向 居中 对齐 */
</style>
```
- ```css
<style>
align-items: flex-start; /* 沿着交叉轴方向 起点 对齐（默认值） */
</style>
```
- ```css
<style>
align-items: flex-end; /* 沿着交叉轴方向 结尾 对齐 */
</style>
```
- ```css
<style>
align-items: stretch; /* 沿着交叉轴方向自动进行拉升到最大 */
</style>
```
如下图是元素不设置高的情况下
- ```css
<style>
align-items: baseline; /* 沿着交叉轴方向，按照项目内的文字对齐 */
</style>
```
