宽度相等的柔性物品

Question

到目前为止我的看法如何：

我希望它看起来如何：

使用flexbox我试图让每个刻度线彼此对齐，这样每个段落将占用相同的空间量并在第二个例子中换行新行，如果有人可以提供帮助：）

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.first,.second {
  display: flex;
  flex-wrap: wrap;
}

p {
  padding: 1em .5em;
  flex: 1;
}

p::before {
  content: '✔';
}

＆＃13;

<div class="container">
  <div class="first">
  <p>  Lorem ipsum dolor sit amet imsppmfmmfmfmfmfmfmfm</p>
  <p>  Lorem ipsum dolor sit ametlorem lorem lorem lorem lorem lorem, </p>
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet, lorem ipsum</p>
  <p>  Lorem ipsum dolor sit amet,</p>
  </div>
  
  <div class="second">
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet, jkdasnjdcmx,cnc,mncn,mn,mcmn</p>
  <p>  Lorem ipsum dolor sit amet, </p>
  <p>  Lorem ipsum dolor sit amet,dddddd </p>
  </div>
</div>
  

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/o-sewell/pen/rmqeME?editors=1010

Answer 1

您遇到的问题主要是第二行的第三项。

弹性项目的初始设置为min-width: auto，这意味着该项目将根据其内容具有最小宽度。这可以是固定宽度的元素，或者在您的情况下，是最长的单词。

由于该项目中的内容包含一个长字符串且没有空格字符，因此它会强制项目展开，从而丢弃列对齐。

只需使用空格字符即可打破该文本字符串，问题就解决了。

我还要将项目宽度设置为20％并覆盖min-width: auto 默认为更稳定。

此处提供更多详细信息： Why doesn't flex item shrink past content size?

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.first,.second {
  display: flex;
  /* flex-wrap: wrap; <-- removed for demo */
}

p {
  padding: 1em .5em;
  flex: 0 0 20%;     /* adjustment */
  overflow: hidden;  /* adjustment */
  border: 1px dashed green;
}

p::before {
  content: '✔';
}

<div class="container">
  <div class="first">
  <p>  Lorem ipsum dolor sit amet imsppmfmmfmfmfmfmfmfm</p>
  <p>  Lorem ipsum dolor sit ametlorem lorem lorem lorem lorem lorem, </p>
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet, lorem ipsum</p>
  <p>  Lorem ipsum dolor sit amet,</p>
  </div>
  
  <div class="second">
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet,</p>
  <p>  Lorem ipsum dolor sit amet, jkdasnjdcmx,cnc,mncn,mn,mcmn</p>
  <p>  Lorem ipsum dolor sit amet, </p>
  <p>  Lorem ipsum dolor sit amet,dddddd </p>
  </div>
</div>
  

revised codepen