时间戳

首页 > 解决方案 > 带有 text-wrap 和 flex-wrap 的 Flex 布局

css - 带有 text-wrap 和 flex-wrap 的 Flex 布局

问题描述

我有几个项目的垂直列表。每个项目都是使用 flexbox 制作的两列布局。左列具有固定宽度。右列包含任意文本，应占用所有可用空间。

当窗口变窄时，我仍然想要两列布局。这里第二列应该变小，里面的文本应该换行。

当窗口变得更窄时（第二列与第一列的大小大致相同），我希望第二列移动到第一列下方。

我只是给第一列一个固定的宽度并放在flex-wrap: wrap容器上。问题是，当右列中的文本超过一行时，flex-wrap 已经启动。它“优先于”第二列中的文本换行。

如何创建上述布局？

我创建了一个代码笔来解决我的问题：https ://codepen.io/maxwell89/pen/PoWrBzJ 。

main {
  border: thin solid black;
}

article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article header {
  margin-right: 2em;
  width: 5em;
  background-color: red;
}

article section {
  background-color: blue;
}
<body>
  <main>
    <article>
      <header>Header1</header>
      <section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
    </article>
    <article>
      <header>Header2</header>
      <section>Something short</section>
    </article>
  </main>
</body>

尝试调整浏览器窗口的大小，您会发现第一项包裹得太早了。

标签： cssflexbox

解决方案

您需要将flex-basis第二个元素的宽度设置为等于第一个元素的宽度。这样做，当该宽度无法容纳在容器内时，您将触发换行。

main {
  border: thin solid black;
}

article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

article header {
  margin-right: 2em;
  width: 5em;
  background-color: red;
}

article section {
  background-color: blue;
  flex-basis: 5em;
  flex-grow: 1;
}
<main>
  <article>
    <header>Header1</header>
    <section>iaOIsadjio jiasdj asd you asda sad iaeojrasod aosidjasdjias diojsadiojas oidjasjio dasijod asd</section>
  </article>
  <article>
    <header>Header2</header>
    <section>Something short</section>
  </article>
</main>

推荐阅读