Flex div moves up when I add text underneath it-CodePudding

I am trying to make a simple webpage however I am stuck on one problem. As soon as I add more text underneath the four boxes unequally the position of these boxes messes up. I was trying adding the height and width in .content .text in CSS and it seems to work when I specify height 150px or any positive integer(however the text moves out from the parent div) but I want to achieve the result in a flexible way. Rather than defining the height, I want to implement the height so that no matter how long the text I add the container's height expands rather than moving the blue box up or down.

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  box-sizing: border-box;
}

.header {
  background-color: rgb(13, 13, 83);
  padding: 0 200px;
}

ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.header-links {
  display: flex;
  padding-top: 10px;
}

.right-links {
  margin-left: auto;
}

.right-links ul li {
  padding-left: 20px;
}

.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 90px 0px;
}

.container .image {
  margin-left: auto;
}

img {
  height: 200px;
  width: 400px;
}

button {
  border: 2px solid rgb(68, 68, 211);
  margin-top: 10px;
  padding: 10px 20px;
  font-size: large;
  font-weight: 700;
  background-color: rgb(68, 68, 211);
  border-radius: 5px;
  cursor: pointer;
  color: white;
}


/* Section of thw code that i causing problem*/

.info {
  color: black;
  background-color: rgb(235, 195, 195);
  padding: 30px 200px;
  text-align: center;
}

.cards {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 30px 0;
}

.card {
  height: 150px;
  width: 150px;
  border: 3px solid rgb(48, 15, 235);
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}

.content .text {
  max-height: auto;
  width: 150px;
}

<!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">
  <link rel="stylesheet" href="/portfolio css/portfolio.css">
  <title>My Portfolio</title>
</head>

<body>
  <div >
    <div >
      <div >
        <ul>
          <li>Header Logo</li>
        </ul>
      </div>
      <div >
        <ul>
          <li>Header Link one</li>
          <li>Header Link two</li>
          <li>Header Link three</li>
        </ul>
      </div>
    </div>
    <div >
      <div >
        <h1>This website is awesome.</h1>
        <p>The website has some subtext that goes here.</p>
        <button>Sign Up</button>
      </div>
      <div ><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
    </div>
  </div>
  </div>
  <div >
    <h1>Some random information.</h1>
    <div >
      <div >
        <div ></div>
        <div >Some random text will go here.</div>
      </div>
      <div >
        <div ></div>
        <div >Some random text will go here.Some random text will go here.</div>
      </div>
      <div >
        <div ></div>
        <div >Some random text will go here.</div>
      </div>
      <div >
        <div ></div>
        <div >Some random text will go here.</div>
      </div>
    </div>
  </div>
  <div ></div>
  <div ></div>
  <div ></div>
</body>

</html>

CodePudding user response：

.cards {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 30px 0;
}

You set the align-items to center instead of flex-start. Now it will align the items on the top line.

CodePudding user response：

Try using the following style on .cards

.cards {
  display: flex;
  justify-content: space-evenly;
  /* start works, but doesn't have full browser support */
  /* align-items: start; */
  align-items: flex-start;
  padding: 30px 0;
}