时间戳

首页 > 解决方案 > 如何使用 flexbox 使水平行中的列相等？

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

问题描述

我正在尝试构建一个页脚，它看起来像使用 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>

预期结果 ：在此处输入图像描述

标签： htmlcssflexbox

解决方案

您需要修复您的 HTML 结构和拼写错误（结束<a>标记错误输入，结束</div>丢失）。

然后display:flex在列的父级上设置属性，您可以允许它换行。（添加了一些类以使其更易于阅读并查看属性的应用位置）

列也可以是弹性盒子，但是在列方向上，孩子不需要调整大小， 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>

推荐阅读