等宽的柔性物品

Question

我的目前看起来如何：

我希望它看起来如何：

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

 * { 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: '✔'; } 

 <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> 

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

Answer 1

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

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

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

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

我还将项目宽度设置为20％并覆盖min-width: auto默认值以获得更高的稳定性。

更多细节： 为什么flex项目不会缩小内容大小？

 * { 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> 

修改后的codepen