8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Certes 2月前

55 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)
  • 在 CSS 中,父容器不知道其子容器何时换行。因此,它会继续缩放其大小,而不管内部发生的情况。

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

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

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

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

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

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

返回
作者最近主题: