display: flex; 自动换行

`display: flex;` 是 CSS3 中用于创建弹性盒模型的一种布局模式，它允许元素在一行内自动换行，以便更好地利用可用空间。当元素过多，无法在同一行完全展示时，`flex-wrap` 属性控制了换行的行为：

- `nowrap` (默认)：元素不会换行，超出部分将被隐藏。
- `wrap`：元素会在需要的时候换到下一行，每一行都尽可能地填满可用空间。
- `wrap-reverse`：类似 `wrap`，但是元素从最后一行开始往上排列。

下面是一个简单的示例，展示了如何使用 `display: flex;` 和 `flex-wrap: wrap;` 实现元素自动换行：

<div style="display: flex; flex-wrap: wrap;">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
  <div>Element 5</div>
</div>

在这个例子中，如果元素的宽度不足以放下所有五个，它们会换到下一行继续显示。

相关问题

display:flex自动换行

display:flex可以使用flex-wrap属性来控制其子元素的换行方式。flex-wrap属性有三个值可选：nowrap（不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。默认值为nowrap，即不换行。

display:flex自动换行伸

display:flex的默认行为是不自动换行的。如果需要在父容器中自动换行，可以给父容器设置flex-wrap: wrap属性。这样当子项超出父容器的宽度时，会自动换行显示。

相关问题:
1. flex布局还有哪些常用属性？
2. 如何实现子项与其内容等宽，并将所有子项的高度设置为最高子项的高度？