Home > Enterprise >  How to match columns's heights in flexbox?
How to match columns's heights in flexbox?

Time：03-07

I'm building a basic front-end project that should look like this: enter image description here

I'm using flexbox to make it responsive but the columns's heights are unequal: enter image description here

I'm using flexbox inside flexbox to position all elements. How do I fix this ? This is the html and css code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3 Column Card</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend Deca:wght@100&display=swap" rel="stylesheet">
</head>
<body>
  <br>
  <br>
  <div >
    <!--First column-->
    <div >
      <div >
        <div >
          <img src="./images/icon-sedans.svg">
          <h1>SEDANS</h1>
        </div>
        <div >
          <p>Choose a sedan for its<br>affordability and excellent<br>fuel economy. Ideal for<br>cruising in the city or on<br>your next road trip</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>







    <!--Second column-->
    <div >
      <div >
        <div >
            <img src="./images/icon-suvs.svg">
            <h1>SUVS</h1>
        </div>
        <div >
          <p>Take an SUV for its spacious<br>interior, power and versatility. Perfect for your<br>next family vacation and<br>off-road adventures.</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>







    <!--Third column-->
    <div >
      <div >
        <div >
          <img src="./images/icon-luxury.svg">
            <h1>LUXURY</h1>
        </div>
        <div >
          <p>Cruise in the best car brands<br>without the bloated prices.<br>Enjoy the enhanced comfort<br>of a luxury rental and arrive<br>in style.</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>
 </div>
</body>
</html>





.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(31, 77%, 52%);
  }

  .flex-items:nth-child(1) button{
      color:hsl(31, 77%, 52%) ;
  }

  .flex-items:nth-child(1) button:hover{
    background-color: hsl(31, 77%, 52%);
    color: white;
}

  
  .flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(184, 100%, 22%);
  }

  .flex-items:nth-child(2) button{
    color: hsl(184, 100%, 22%);
  }

  .flex-items:nth-child(2) button:hover{
    color: white;
    background-color: hsl(184, 100%, 22%);
  }

  
  .flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(179, 100%, 13%);
  }

  .flex-items:nth-child(3) button{
      color: hsl(179, 100%, 13%);
  }

  .flex-items:nth-child(3) button:hover{
    color: white;
    background-color: hsl(179, 100%, 13%);
}



  .flex-container2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items2:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items2:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items2:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  div{
      text-align: center;
  }

  .flex-container3 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items3:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items3:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items3:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-container4 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items4:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items4:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items4:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

body{
    font-family: 'Lexend Deca', sans-serif;
}

h1, p{
    color: hsla(0, 0%, 100%, 0.75)
}

button{
    margin-bottom: 15px;
    background-color: white;
    border-color: white;
    border-radius: 20px 20px 20px 20px;
    width: 110px;
    height: 40px;
    cursor: pointer;
}

CodePudding user response：

In your .flex-container style, you could swap align-items: center; for align-items: stretch;. That should stretch the children vertically to match each other.

For example:

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
  }
  
  .flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(31, 77%, 52%);
  }

  .flex-items:nth-child(1) button{
      color:hsl(31, 77%, 52%) ;
  }

  .flex-items:nth-child(1) button:hover{
    background-color: hsl(31, 77%, 52%);
    color: white;
}

  
  .flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(184, 100%, 22%);
  }

  .flex-items:nth-child(2) button{
    color: hsl(184, 100%, 22%);
  }

  .flex-items:nth-child(2) button:hover{
    color: white;
    background-color: hsl(184, 100%, 22%);
  }

  
  .flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
    background-color: hsl(179, 100%, 13%);
  }

  .flex-items:nth-child(3) button{
      color: hsl(179, 100%, 13%);
  }

  .flex-items:nth-child(3) button:hover{
    color: white;
    background-color: hsl(179, 100%, 13%);
}



  .flex-container2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items2:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items2:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items2:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  div{
      text-align: center;
  }

  .flex-container3 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items3:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items3:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items3:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

  .flex-container4 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  
  .flex-items4:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items4:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }
  
  .flex-items4:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
  }

body{
    font-family: 'Lexend Deca', sans-serif;
}

h1, p{
    color: hsla(0, 0%, 100%, 0.75)
}

button{
    margin-bottom: 15px;
    background-color: white;
    border-color: white;
    border-radius: 20px 20px 20px 20px;
    width: 110px;
    height: 40px;
    cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3 Column Card</title>
  <link href="styles.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend Deca:wght@100&display=swap" rel="stylesheet">
</head>
<body>
  <br>
  <br>
  <div >
    <!--First column-->
    <div >
      <div >
        <div >
          <img src="./images/icon-sedans.svg">
          <h1>SEDANS</h1>
        </div>
        <div >
          <p>Choose a sedan for its<br>affordability and excellent<br>fuel economy. Ideal for<br>cruising in the city or on<br>your next road trip</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>







    <!--Second column-->
    <div >
      <div >
        <div >
            <img src="./images/icon-suvs.svg">
            <h1>SUVS</h1>
        </div>
        <div >
          <p>Take an SUV for its spacious<br>interior, power and versatility. Perfect for your<br>next family vacation and<br>off-road adventures.</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>







    <!--Third column-->
    <div >
      <div >
        <div >
          <img src="./images/icon-luxury.svg">
            <h1>LUXURY</h1>
        </div>
        <div >
          <p>Cruise in the best car brands<br>without the bloated prices.<br>Enjoy the enhanced comfort<br>of a luxury rental and arrive<br>in style.</p>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
        <div >
          <button>Learn More</button>
        </div>
     </div>
    </div>
 </div>
</body>
</html>

Page link：https//www.codepudding.com/Enterprise/325780.html

Prev:Can you help me to do movable window in js
Next:How do I create a logo to represent a file of text?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding