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

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

Flexbox 列換行列表，無重疊項目

Flexbox 列換行列表，無重疊項目

牧羊人nacy 2023-12-11 10:19:24
我有一個列表，我想將其包裝在最大寬度為 540px 的彈出模式上顯示。通常，它看起來像這樣：但如果添加太多名字，那么它就會像這樣重疊：我的目標是通過隱藏溢出（僅顯示基于數據的最大可能列）或使其可滾動來防止名稱重疊。當項目數量和名稱長度未知時，如何包裝列表以占用水平和垂直空間（如下所示）但防止項目重疊？這是我當前使用的 html 和 css 的片段：.modal {  width: 600px;}.wrapped-list {  margin-top: 12px;  max-height: 200px;  display: flex;  flex-direction: column;  flex-wrap: wrap;}<div class="modal"></div>
查看完整描述

2 回答

?
慕尼黑5688855

TA貢獻1848條經驗 獲得超2個贊

使用 Flexbox 因column wrap錯誤而臭名昭著（請參閱下面的部分列表）。

column wrap這種設置有很多問題，我建議盡可能遠離。請row wrap改用 CSS Grid 或 CSS Grid。

在這種特殊情況下，列正確地包裝了內容，但 Flex 算法沒有考慮容納列表項標記所需的寬度。

為了說明這一點，下面是帶有邊框的內容：

.modal {

? width: 600px;

}


.wrapped-list {

? margin-top: 12px;

? max-height: 200px;

? display: flex;

? flex-direction: column;

? flex-wrap: wrap;

}


li {

? border: 1px solid red;

}

<div class="modal">

<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>

</div>

從第一列中可以清楚地看到，標記被排除在寬度計算之外，并且與以下列中的內容重疊。

如果您打算堅持使用column wrap，則可以嘗試通過為所有項目添加左邊距來補償缺失的寬度，從第二列中的第一項開始。

像這樣的東西：

li:nth-child(n?+?11)?{
??margin-left:?45px;
}

.modal {

? width: 600px;

}


.wrapped-list {

? margin-top: 12px;

? max-height: 200px;

? display: flex;

? flex-direction: column;

? flex-wrap: wrap;

? overflow: auto;

}


li:nth-child(n + 11) {

? margin-left: 45px;

}

<div class="modal">

<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>

</div>

flexbox 的部分問題列表column wrap：

  • 當 Flexbox 項目以列模式換行時，容器不會增加其寬度

  • Flexbox：當flex-direction：column，flex-wrap：wrap時，寬度計算錯誤

  • 彈性項目是否可以與其上方的項目緊密對齊？

  • flex-wrap 在嵌套的 Flex 容器中不起作用

  • Flex 容器的高度在 Safari 中無法正常工作

  • Flexbox 列換行列表，無重疊項目


查看完整回答
反對 回復 2023-12-11
?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

你可以這樣做：


.modal {

  width: 600px;   

  max-height: 200px;

}


.wrapped-list {

    width: 600px;

  margin-top: 12px;

  max-height: 200px;

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

   overflow-x:auto;

 }

 

.wrapped-list li{

   padding-right:50px; 

 }

<div class="modal">

  <ol class="wrapped-list">

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

    <li>Student Name</li>

  </ol>

</div>


查看完整回答
反對 回復 2023-12-11
  • 2 回答
  • 0 關注
  • 164 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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