Flexbox：等宽项目，除非一个项目溢出它的容器？

Question

我想创建一个由两个块并排组成的布局，可能在一个弹性框中。这些块可以包含动态文本。在大多数情况下，我希望块的大小相同。通过在每个项目上设置 flex: 1，我发现这很简单。看起来像： https://codepen.io/benrhere/pen/mdpqjJx

<ul class="flex-container">
  <li class="flex-item">This is some text</li>
  <li class="flex-item">This is also some text</li>
</ul>

.flex-container {
  display: flex;
  justify-content: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
}

但是，如果一个项目的内容超出了它的框（比如里面有更长的字符串），那么如果另一个框有额外的 space，溢出的框应该占用额外的 space（但仅在需要时）。参见：https://codepen.io/benrhere/pen/KKZyBdj

<ul class="flex-container">
  <li class="flex-item">This is some text</li>
  <li class="flex-item">This is also some text which overflows</li>
</ul>

(与上面相同 CSS，并且几乎相同 HTML 但第二个字符串更长目前，溢出是不可见的，因为盒子不能超过 50%，这是有道理的）。

是否有可能完全在 CSS 内实现这种动态行为？ Flexbox 是否适合这种情况？

谢谢...

Answer 1

我想你在找 flex: auto

例如

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   *
  
  /* Then we define how is distributed the remaining space */
  justify-content: stretch;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  flex: auto;
  background: tomato;
  padding: 5px;
  rwidth: 0;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  flex-grow: 1;
}

<ul class="flex-container">
  <li class="flex-item">This is some text and a lot more of it</li>
  <li class="flex-item">This</li>
</ul>

Answer 2

这将解决您的问题。

flex-basis:100%; 基本上说 flex childs 都得到了 parent（屏幕宽度）的 100% 宽度，但他们只能得到 50%，因为两个兄弟姐妹都试图得到 % 100。您可以使用 flex-basis:50% 也可以，因为您希望所有 child 容器占屏幕宽度的 50%，但如果您转到 flex-basis:35%;，两个容器将只使用屏幕的 70%。

white-space:nowrap; 使 div 中的文本不换行。

*,
*::before,
*::after {
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}


body {
  min-height: 100vh;
  background-color: bisque;
  margin: 0;
  
}

ul,li
{
  margin:0;
  display: block;
  padding: 0;
}


.flex-container {
  display: flex;
  flex-direction: row;
  list-style: none;
}


.flex-item {
background-color: tomato;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
margin:1rem;
padding: 1rem;
white-space:nowrap;
flex-basis: 100%;
height: 10rem;
display: flex;
flex-direction: column;
justify-content: center;
}

<div class="container">
      <ul class="flex-container">
        <li class="flex-item long-text">
          Lorem ipsum dolor sit amet consectetur</
        </li>
        <li class="flex-item">
         This
        </li>
      </ul>
</div>

Flexbox：等宽项目，除非一个项目溢出它的容器？

Flexbox: Even-width items, unless one item overflows its container?

css

flexbox