CSS（二）横向布局（Flex换行）

前言

使用flex布局时，弹性子元素默认是排列在一行的；
但是如果子元素的个数超过了弹性容器的长度，则需要进行换行；

使用方式

<div class="flexContainer">
      <div class="flexItem" style="background-color: red">a</div>
      <div class="flexItem" style="background-color: blue">b</div>
      <div class="flexItem" style="background-color: green">c</div>
      <div class="flexItem" style="background-color: black">d</div>
</div>
...
.flexContainer {
  display: flex;
  flex-direction: row;
  background-color: gray;
  width: 800px;
  height: 50px;
}
.flexItem {
  width: 250px;
  height: 20px;
  color: white;
  text-align: center;
}

未使用换行之前的展示

展示

1.基本使用wrap

.flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: gray;
  width: 800px;
  height: 50px;
}

截图
wrap的其他属性值

• nowrap：不适用，默认
• wrap：换行
• wrap-reverse：反转wrap排列
• initial：
• inherit：

2.修复flex-wrap的对齐行为align-content

align-content属性用于修改 flex-wrap 属性的行为。类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

截图