时间戳

首页 > 解决方案 > 动态调整宽度并包装嵌套的弹性盒

html - 动态调整宽度并包装嵌套的弹性盒

问题描述

我有一个 div 在一些 flexbox 的深处嵌套了几层，这些 flexbox 会根据其中文本的长度动态改变宽度。

是否有可能让包含的弹性框也改变宽度并根据需要纯粹使用 CSS 换行？如果没有，我愿意接受任何 JavaScript 解决方案。

这是一个视觉效果，可以更好地了解我在说什么：

嵌套的弹性盒

如果有人想玩它，这里有一个代码片段：

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

.flex-item {
  flex: 1 auto;
  border: 1px solid black;
  margin: 5px;
}

.root {
  max-width: 600px;
  border: 1px solid black;
}

.level-2 {
  background-color: tomato;
}

.level-3 {
  background-color: cornflowerblue;
}
<div class="flex-container root">
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
  <div class="flex-container flex-item level-2">
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some longest text over here</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
    <div class="flex-item level-3">
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
      <div>Some text</div>
    </div>
  </div>
</div>

标签： htmlcssflexbox

解决方案

我能看到的最好的情况是第一种和第二种情况。它不是 100% 完美，但在调整大小时，您会看到 1 和 2 之间的转换：

* {
 box-sizing:border-box;
}

.container {
  background:red;
  padding:10px;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.box {
  flex:1 0 50%;
  background:blue;
  border:1px solid;
  display:flex;
  padding:10px;
}
.box > span {
   background:#fff;
   border:1px solid;
  flex:1 0 50%;
  white-space:nowrap;
}
<div class="container">
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>
<div class="container">
  <div class="box">
    <span>some text<br>some text long long long long text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
  <div class="box">
    <span>some text<br>some text<br>some text</span>
    <span>some text<br>some text<br>some text</span>
  </div>
</div>

推荐阅读