时间戳

首页 > 解决方案 > css flex-wrap flex-basis 是不够的

css - css flex-wrap flex-basis 是不够的

问题描述

我有一个 div 容器，其中有 5 个 div 作为子级。我想做的是，即使有足够的空间留在第一行，我也希望最后一个孩子进入下一行。我想要这个的原因是我正在为较小的屏幕应用一些 CSS，所以我不想更改 html。

喜欢：

---a--- ---b--- ---c--- ---d--- ---e---

成为：

- -A B C D - -

      ---e---

我已经尝试了 flex-basis 100%，但它会将宽度增加到 100%。我想保持原来的大小，并保持在中心。

谢谢你。

标签： css

解决方案

鉴于提供的信息量很少且没有源代码，我试图重新创建您的问题并提供解决方案。如果这不适用于您的情况，我建议您编辑您的问题，以提供一个最小的、可重现的示例供其他人解决。

html:

<div class="parent-div">
  <div class="sub-div">--a--</div>
  <div class="sub-div">--b--</div>
  <div class="sub-div">--c--</div>
  <div class="sub-div">--d--</div>
  <div class="sub-div">--e--</div>
</div>

CSS：

.parent-div {
  text-align: center;
}

.sub-div {
  display: inline;
}

.sub-div:last-child {
  display: block;
}

这是一个有效的 jsfiddle：https ://jsfiddle.net/Lg8smdy5/

推荐阅读