flex布局的相关问题

使用 Flex 布局时，如何使不同字数的文本在同一行或同一列上保持对齐

使用 flex-basis 属性：将容器设置为 Flex 布局，并使用 flex-basis 属性为每个元素设置一个基础宽度。当元素的内容不足以填满这个基础宽度时，元素会自动居中对齐。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 200px; /* 设置基础宽度 */
  text-align: center;
  margin: 10px;
}

---

 flex布局文字可以换行但数字不换行

display: flex;
white-space: normal;
word-break: break-all;

---

flex布局采用space-around这种方法，但是最后一行如何让他左对齐

flex 配合百分比使用。
若 justify-content: space-around;，需要添加空白占位元素。
若 justify-content: flex-start;，不需添加额外元素。
item 内部 text-align: center; 实现居中。

添加一个伪类就可以

.container:after {
    content: "";
    flex: auto;
}

---