如何使用 flexbox 使水平行中的列相等？

Question

我正在嘗試構建一個頁腳，看起來像使用 flexbox 的頁腳。 但是，我已經嘗試了幾個小時來對齊標題以保持在每一列的頂部，每一列都對齊一個接一個，並且行本身保持居中。 我曾嘗試使用 flexbox 工具，如flex-direction和flex-wrap ，但我最終得到了一個亂七八糟的頁腳。 我不同意我需要解決的問題。 請幫忙。 *（另外，我使用了顏色編碼的邊框，以便更容易查看邊框的位置，它們是不必要的）。

 .container-footer { background-color: #ebebe0; padding: 20px; border: 5px black solid; line-height: 20px; /* line between words */ }.container-footer ul { border: 3px purple solid; width: 40%; height: 10%; }.container-footer li { border: 3px green solid; justify-content: left; }.container-footer h2 { border: 3px red solid; text-align: left; height: 10%; width: 20%; }.col-5 { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap; }.col-6 { background-color: #ebebe0; padding: 10px; display: flex; flex-direction: row; border: 5px black solid; flex-wrap: nowrap; }.col-7 { background-color: #ebebe0; padding: 10px; display: flex; flex-direction: row; border: 5px black solid; flex-wrap: nowrap; }.col-8 { background-color: #ebebe0; padding: 10px; display: flex; flex-direction: row; border: 5px pink solid; flex-wrap: nowrap; }.col-9 { background-color: #ebebe0; padding: 10px; display: flex; flex-direction: row; border: 5px blue solid; flex-wrap: nowrap; }.col-10 { background-color: #ebebe0; padding: 10px; display: flex; flex-direction: row; border: 5px yellow solid; flex-wrap: nowrap; } a:active, a:visited, a { color: black; text-decoration: none; }.ft-title { font-weight: bold; } a.ft-title { color: none; text-decoration: none; }

 <footer> <div class="container-footer"> <div> <:-- Row 1: Shop and Learn --> <div class="col-5"> <h2 class="ft-title">Shop and Learn</h2> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">iTunes</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Gift Cards</a<</li> </ul> <:-- --> <:-- Row 2. Apple Store --> <div class="col-6"> <h2 class="ft-title">Apple Store</h2> <ul> <li><a href="#">Find a Store</a></li> <li><a href="#">Genius Bar</a></li> <li><a href="#">Workshops and Learning</a></li> <li><a href="#">Youth Programs</a></li> <li><a href="#">Apple Store App</a></li> <li><a href="#">Refurbished</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Reuse and Recycling</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Shopping Help</a></li> </ul> <:-- --> <!-- Row 3: For Education & For Business --> <div class="col-7"> <h2 class="ft-title">For Education</h2> <ul> <li><a href="#">Apple and Education</a></li> <li><a href="#">Shop for College</a></li> </ul> <ul> <h2 class="ft-title">For Business</h2> <li><a href="#">iPhone in Business</a></li> <li><a href="#">iPad in Business</a></li> <li><a href="#">Mac in Business</a></li> <li><a href="#">Shop for Your Business</a></li> </ul> <!-- --> </div> <!-- Row 4: Account & Apple Values --> <div class="col-8"> <h2 class="ft-title">Account</h2> <ul> <li><a href="#">Manage Your Apple ID</a></li> <li><a href="#">Apple Store Account</a></li> <li><a href="#">iCloud.com</a></li> </ul> </div> <div class="col-9"> <ul> <h2 class="ft-title">Apple Values</h2> <li><a href="#">Environment</a></li> <li><a href="#">Supplier Responsibility</a></li> <li><a href="#">Accessibility</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Inclusion and Diversity</a></li> <li><a href="#">Education</a></li> </ul> <!-- --> </div> <!-- Row 5: About Apple --> <div class="col-10"> <ul> <h2 class="ft-title">About Apple</h2> <li><a href="#">Apple Info</a></li> <li><a href="#">Job Opportunities</a></li> <li><a href="#">Press Info</a></li> <li><a href="#">Investors</a></li> <li><a href="#">Events</a></li> <li><a href="#">Hot News</a></li> <li><a href="#">Legal</a></li> <li><a href="#">Contact Apple</a></li> <!-- --> </ul> </div>

預期結果：

Answer 1

您需要修復您的 HTML 結構和拼寫錯誤（關閉<a>標記錯誤，關閉</div>缺失）。

然后在列的父級上設置display:flex屬性，您可以允許它換行。 （添加了一些 class 以使其更易於閱讀並查看應用屬性的位置）

列也可以是彈性盒子，但是在列方向上，孩子不需要調整大小，flex-grow 可以完成填充盒子的工作。

這是一個可能的示例，列環繞成幾行以用於較低的屏幕。

 * { /* reset to even everything, handy for sizing the pieces of a layout */ margin: 0; padding: 0; box-sizing: border-box; /* avoids surprise once you remove your test borders */ }.container-footer { background-color: #ebebe0; padding: 20px; border: 5px black solid; line-height: 20px; /* line between words */ /* extra for infos: */ font-size:clamp(8px, 3vw,1rem); }.flexbox { display: flex; }.row { flex-direction: row }.column { flex-direction: column }.wrap { flex-wrap: wrap; }.gap-2px { gap: 2px; } [class^=col] { flex-grow: 1; border: 5px black solid; padding: 10px; }.container-footer ul { border: 3px purple solid; flex-grow: 1; }.container-footer li { border: 3px green solid; justify-content: left; }.container-footer h2 { border: 3px red solid; text-align: left; white-space: nowrap; }.col-5 {}.col-6 { background-color: #ebebe0; }.col-7 { background-color: #ebebe0; }.col-8 { background-color: #ebebe0; border: 5px pink solid; }.col-9 { background-color: #ebebe0; border: 5px blue solid; }.col-10 { background-color: #ebebe0; border: 5px yellow solid; } a:active, a:visited, a { color: black; text-decoration: none; }.ft-title { font-weight: bold; } a.ft-title { color: none; text-decoration: none; }

 <footer> <div class="container-footer"> <div class="flexbox row wrap gap-2px"> <:-- Row 1: Shop and Learn --> <div class="col-5 flexbox column"> <h2 class="ft-title">Shop and Learn</h2> <ul> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">TV</a></li> <li><a href="#">Music</a></li> <li><a href="#">iTunes</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">Gift Cards</a></li> </ul> <:-- --> </div> <:-- Row 2. Apple Store --> <div class="col-6 flexbox column"> <h2 class="ft-title">Apple Store</h2> <ul> <li><a href="#">Find a Store</a></li> <li><a href="#">Genius Bar</a></li> <li><a href="#">Workshops and Learning</a></li> <li><a href="#">Youth Programs</a></li> <li><a href="#">Apple Store App</a></li> <li><a href="#">Refurbished</a></li> <li><a href="#">Financing</a></li> <li><a href="#">Reuse and Recycling</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Shopping Help</a></li> </ul> <:-- --> </div> <!-- Row 3: For Education & For Business --> <div class="col-7 flexbox column"> <h2 class="ft-title">For Education</h2> <ul> <li><a href="#">Apple and Education</a></li> <li><a href="#">Shop for College</a></li> </ul> <ul> <h2 class="ft-title">For Business</h2> <li><a href="#">iPhone in Business</a></li> <li><a href="#">iPad in Business</a></li> <li><a href="#">Mac in Business</a></li> <li><a href="#">Shop for Your Business</a></li> </ul> <!-- --> </div> <!-- Row 4: Account & Apple Values --> <div class="col-8 flexbox column"> <h2 class="ft-title">Account</h2> <ul> <li><a href="#">Manage Your Apple ID</a></li> <li><a href="#">Apple Store Account</a></li> <li><a href="#">iCloud.com</a></li> </ul> </div> <div class="col-9 flexbox column"> <ul> <h2 class="ft-title">Apple Values</h2> <li><a href="#">Environment</a></li> <li><a href="#">Supplier Responsibility</a></li> <li><a href="#">Accessibility</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Inclusion and Diversity</a></li> <li><a href="#">Education</a></li> </ul> <!-- --> </div> <!-- Row 5: About Apple --> <div class="col-10 flexbox column"> <ul> <h2 class="ft-title">About Apple</h2> <li><a href="#">Apple Info</a></li> <li><a href="#">Job Opportunities</a></li> <li><a href="#">Press Info</a></li> <li><a href="#">Investors</a></li> <li><a href="#">Events</a></li> <li><a href="#">Hot News</a></li> <li><a href="#">Legal</a></li> <li><a href="#">Contact Apple</a></li> <!-- --> </ul> </div>

Answer 2

在需要相等的每一列上使用 flex:1

Answer 3

在對每一列進行分組時，您的 html 不一致且不正確。 為了使每列的寬度相同，請使用“display:Flex”和“justify-content”。

.container {
   display:flex;
   justify-content: space-around;
   width:80%;
   margin: 0 auto;
}

在某些地方，您已將 h2 放入 ul 中，如下所示。 這是完全錯誤的。

<ul>
    <h2 class="ft-title">Apple Values</h2>
    <li><a href="#">Environment</a></li>
    <li><a href="#">Supplier Responsibility</a></li>
    <li><a href="#">Accessibility</a></li>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Inclusion and Diversity</a></li>
    <li><a href="#">Education</a></li>
</ul>

這是一個有效的解決方案，請檢查。

https://codepen.io/vicky86/pen/VwKYyRK