8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. css
  3. 使容器在包装时收缩以适应子元素

使容器在包装时收缩以适应子元素

Certes 2月前
48 0

我正在尝试弄清楚 flexbox 如何在以下情况下工作（应该如何工作？...）： .holder { width: 500px; background: lightgray; display: flex; flex-direction: row; justify-content:

我正在尝试弄清楚 flexbox 在以下情况下如何工作（应该如何工作？...）： 

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}
<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

JSFiddle 在这里

问题是，当有足够的空间容纳元素时，我会得到一个紧密贴合的子元素，并且它们之间的间距均匀。（第一个，顶部 div 块）

但是，当没有足够的空间并且子元素内的文本开始换行时，一切都会朝着奇怪的方向发展 - 子元素不再紧密贴合，尽管换行之后，弹性子元素周围有足够的空间，但由于不再合适，周围的空间实际上也没有机会发挥作用（第二个 div 块）

但是，如果我在自动换行符出现的地方添加手动换行符，那么所有内容都会按照“应该”的方式布局……（底部，第三个块）

我希望的是让孩子们紧紧地呆在他们的盒子（黑色边框）里，剩下的空间会均匀分布在他们之间，而我不需要添加手动换行符（在我的情况下这不是一个选项）

这可能吗？

帖子版权声明 1、本帖标题：使容器在包装时收缩以适应子元素
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Certes在本站《css》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    在 CSS 中，父容器不知道其子容器何时换行。因此，它会继续缩放其大小，而不管内部发生的情况。

    换句话说，浏览器在初始级联时渲染容器。当子元素换行时，它不会重新排列文档。

    这就是为什么容器不会收缩较窄的布局。它只是继续向前，就像没有被包裹一样，右侧的保留空间就是证据。

    水平空白的最大长度是容器预期存在的元素的长度。

    在以下演示中，可以看到随着窗口水平调整大小而出现和消失的空白： DEMO

    您需要一个 JavaScript 解决方案（参见 此处 和 此处 ）...或 CSS 媒体查询（参见 此处 ）。

    处理换行文本时， text-align: right 容器在某些情况下可能会有所帮助。

  • 引用 3楼

    为什么说“父容器不知道其子容器何时换行”？为什么它不知道？如果这是规范，那就说得通了。但不是“它不知道”。浏览器开发人员可以获取子容器的内容宽度并相应地调整其容器宽度。

  • 引用 4楼

    为什么容器不知道其内容在宽度方面的包装，却知道其高度呢？（容器会相应地改变其高度以适应其包装的内容）

  • 引用 5楼

    @IlyaLoskutov，你能发个例子吗？也许是 jsFiddle 中的一个代码示例。

  • 引用 6楼

    @MichaelBenjamin 这是我关于手头问题的一个封闭式问题。.item 充当文本的容器。当文本换行时，容器会改变其高度以适应文本（可以从我附上的两张图片中观察到差异），但实际上，它并不想缩小其宽度以达到换行文本的最长行。在这个带有弹性框的示例中可以看到同样的情况（.internal-container 在其项目换行时改变其高度）

  • 引用 7楼

    仔细看看 我修改过的 Fiddle

    • .holder width 至 max-width （在 .v 类中）
    • 修改 .holder 为 wrap 及其 space-around 子项
    • 为清晰起见， 添加了 2 个 .v
    • 删除了 <br>'s
    • 最重要的是 ， 添加 flex: 0 0 到 .child

    Flexbox 几乎总是需要 max-width 设置的，这比 更灵活 width 。根据您需要 .child ren 的行为方式，修改 flex-grow 和 flex-shr以k in flex: 0 0 满足您的需求。（ 的结果 flex: 1 0 看起来也不错）

    ...不需要 Javascript...

    Codrops Flexbox 参考 对于理解灵活框布局非常有用。

  • 引用 8楼

    如果有人想知道，flex: 0 0; 不符合 OP 的要求；它迫使 flex 子元素换行，即使有足够的空间。比较两个 fiddle 中的顶部 flex 父元素，其中有足够的水平空间，但每个元素的文本仍然换行。

  • 引用 9楼

    您的块行为如此的原因是由于 CSS 渲染。

    在第一种情况下，浏览器不知道块何时变得太小而无法容纳其内容。因此它会不断拉伸直到达到最大值，然后呈现文本。

    在最后一种情况下，您告诉浏览器在哪里中断，以便它知道元素不应该变宽。

    轻松解决此问题的唯一方法是自己设置断点。

  • 引用 10楼

    谢谢！我担心这样的事情可能会发生……仍然希望存在一些聪明的黑客攻击，因为这看起来是一种相当常见的情况……

  • 引用 11楼

    我们在工作中也遇到过类似的问题，我们想让图标浮动在文本旁边：codepen.io/WartClaes/pen/grVQrz?editors=1100。只是我们还遇到了一个问题，即尽管有大量空白，但块始终会呈现全宽。

  • 引用 12楼

    如果您正在寻找仅 CSS 的解决方案，则可以使用类似的方法 width: 100px; 来设置子项的最小宽度并 flex: auto; 使其增大。

    例如： https://jsfiddle.net/ncvp7gzs/1

    （请注意，这仅在 Chrome 上进行了测试）

返回
作者最近主题：