亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在Flex容器中等高行

在Flex容器中等高行

皈依舞 2019-07-12 15:23:07
在Flex容器中等高行如您所見,list-items在第一個row有同樣的height..但是第二個項目row有不同heights..我要所有的物品都有制服height.有沒有辦法做到這一點而不付出定高而且只使用撓曲箱?enter image description here這是我的code.list {  display: flex;  flex-wrap: wrap;  max-width: 500px;}.list-item {  background-color: #ccc;  display: flex;  padding: 0.5em;  width: 25%;  margin-right: 1%;  margin-bottom: 20px;}.list-content {  width: 100%;}<ul class="list">  <li class="list-item">    <div class="list-content">      <h2>box 1</h2>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    </div>  </li>  <li class="list-item">    <div class="list-content">      <h3>box 2</h3>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>    </div>  </li>  <li class="list-item">    <div class="list-content">      <h3>box 2</h3>      <p>Lorem ipsum dolor</p>    </div>  </li>  <li class="list-item">    <div class="list-content">      <h3>box 2</h3>      <p>Lorem ipsum dolor</p>    </div>  </li>  <li class="list-item">    <div class="list-content">      <h1>h1</h1>    </div>  </li></ul>
查看完整描述

3 回答

?
九州編程

TA貢獻1785條經驗 獲得超4個贊

答案是否定的。

在柔性箱規范中提供了原因:

6.柔性線

在多行FLEX容器中,每一行的交叉大小是包含在該行上的FLEX項所必需的最小尺寸。

換句話說,當一個基于行的Flex容器中有多行時,每一行的高度(“交叉大小”)是包含在該行上的FLEX項所必需的最小高度。

然而,在CSS Grid布局中,等高行是可能的:

否則,考慮使用JavaScript替代方案。


查看完整回答
反對 回復 2019-07-12
?
紅顏莎娜

TA貢獻1842條經驗 獲得超13個贊

如果你知道你正在映射的項目,您可以通過一次執行一行來完成這一任務。..我知道這是個解決辦法,但有效。

對我來說,我每一行有4個項目,所以我把它分成兩行,每一行4項。height: 50%,擺脫flex-grow,有<RowOne /><RowTwo />在.<div>帶著flex-column..這會起作用的

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' /></div>


查看完整回答
反對 回復 2019-07-12
  • 3 回答
  • 0 關注
  • 670 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號