在CSS 佈局中追求等高列可能會在依賴基於百分比的表格時帶來挑戰。為了解決這個問題,flexbox 提供了一個強大的解決方案,保證所有列的高度相等。
HTML 結構與原始程式碼:
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
要實現等高列的Flexbox,需要修改CSS:
ul { display: flex; }
這個簡單的變更將 ul 轉換為 Flex 容器及其直接子級(li) 成為彈性項目。預設情況下,flexbox 應用 flex-direction: row 水平對齊項目。
對齊專案:stretch
相等高度僅適用於同級
身高覆蓋
同一行上等高
禁用等高
以上是Flexbox如何在CSS佈局中實現等高列?的詳細內容。更多資訊請關注PHP中文網其他相關文章!