How to make the columns equal in horizontal row using flexbox?

Question

I am trying to build a footer, that looks like this footer using flexbox. However, I have been trying for hours to align the headers to stay on top of each column, each column to align one right after the other, and the row itself to stay centered. I have tried using flexbox tools like flex-directionand flex-wrap but I just end up with a scrambled mess of a footer. I am at odds at what I need to fix. Please help. *(Also, I have used color-coded borders to make it simpler to see where the borders are, they are unnecessary).

.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>

expected result :

Answer 1

You need to fix your HTML structure and typo (a closing <a> tag mistype, closing </div> missing).

then set the display:flex propertie on the parent of your columns, you may allow it to wrap. (added a few class to make it easier to read and see where properties are applied)

columns can be flex boxes too, but in column direction, sizing is no need for the children, flex-grow can do the job to fill up the box.

here is a possible example, with columns wrapping into a few rows for lower screens.

* {
  /* 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

The your html is not consistent and proper while grouping each column. In order to make each column same width use "display:Flex" with "justify-content".

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

In some of the places you have put your h2 inside an ul like below. Which is completely wrong.

<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>

Here is a working solution, please check.

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

Answer 3

Use flex:1 on every column which needs to be equal