时间戳

首页 > 解决方案 > 将插槽内容添加到 flexbox 时如何导致自动换行；

css - 将插槽内容添加到 flexbox 时如何导致自动换行；

问题描述

我在这样的自定义元素中有一些标记

<div class="competition">
  <slot><slot>
  <div id="compname">2019 Football Competition</div>
</div>

当没有插槽内容时，我希望此面板看起来像这样（ascii 艺术）

---------------------------------------------------------------------
|                    2019 Football Competition                       |
---------------------------------------------------------------------

以单行为中心。如果开槽的内容不是很多，我希望它保持这样，例如，如果开槽的内容是这样设置的

<my-competition-header>
  <div>Joe Bloggs</div>
  <div>2:14:16</div>
</my-competition-header>

我以这样的事情结束

---------------------------------------------------------------------
|   Joe Bloggs       2:14:16           2019 Football Competition    |
---------------------------------------------------------------------

这很好地分布在周围的空间中。

如果内容有点长以至于它不完全适合或者显示它的设备更小我想结束这个

---------------------------------------------------------------------
|                                                          2019     |
|   JoeBloggsHasVeryLongNameSUCHTHATITOVERFLOWS 2:14:16  Football   |
|                                                       Competition |
---------------------------------------------------------------------

我已经尝试过各种形式的 CSS（这解决了我的第一个和第二个问题，但在最后一个问题上分崩离析）。

  .competition
    display: flex;
    flex-direction: row;
    justify-content: space-around;  
    align-items: center;     
  }
  ::slotted(*) {
    flex: 1 0 0;
    margin: 0 auto;
  } 
  .competition>div#compname {
    flex: 0 1 auto;
    margin: 0;
  }

在最后一个它最终是这样的

---------------------------------------------------------------------
|                                                  2019             |
|JoeBloggsHasVeryLongNameSUCHTHATITOVERFLOWS2:14:16Football         |
|                                                  Competition      |
---------------------------------------------------------------------

我不太明白为什么。谁能建议我如何解决这个问题

标签： cssflexbox

解决方案

您可以通过使用column-count和colmn-width喜欢来使用多列布局

div {
 -webkit-column-count: 3;
 -moz-column-count: 3;
 column-count: 3;
}

div {
 -webkit-column-width: 150px;
 -moz-column-width: 150px;
 column-width: 150px;
}

或者您可以简单地使用网格框来防止您的页面让您对此感到压力 

.competition {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
}

div {
  text-align: center;
  margin: 10px;
}
<div class="competition">
  <div>Joe Bloggs | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
    aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>2:14:16| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div id="compname">2019 Football Competition | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

推荐阅读