当我在它下面添加文本时，Flex div 向上移动答案

【问题标题】：Flex div moves up when I add text underneath it当我在它下面添加文本时，Flex div 向上移动
【发布时间】：2022-01-17 20:44:14
【问题描述】：

我正在尝试制作一个简单的网页，但是我遇到了一个问题。一旦我在四个框下方添加了更多文本，这些框的位置就会变得不一样。我试图在 CSS 中添加 .content .text 的高度和宽度，当我指定高度 150px 或任何正整数时它似乎有效（但是文本从父 div 移出）但我想以灵活的方式实现结果.我不想定义高度，而是想实现高度，以便无论我添加容器高度的文本多长，而不是向上或向下移动蓝色框。

* {
  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 class="header">
    <div class="header-links">
      <div class="left-links">
        <ul>
          <li>Header Logo</li>
        </ul>
      </div>
      <div class="right-links">
        <ul>
          <li>Header Link one</li>
          <li>Header Link two</li>
          <li>Header Link three</li>
        </ul>
      </div>
    </div>
    <div class="container">
      <div class="someInfo">
        <h1>This website is awesome.</h1>
        <p>The website has some subtext that goes here.</p>
        <button>Sign Up</button>
      </div>
      <div class="image"><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
    </div>
  </div>
  </div>
  <div class="info">
    <h1>Some random information.</h1>
    <div class="cards">
      <div class="content">
        <div class="card"></div>
        <div class="text">Some random text will go here.</div>
      </div>
      <div class="content">
        <div class="card"></div>
        <div class="text">Some random text will go here.Some random text will go here.</div>
      </div>
      <div class="content">
        <div class="card"></div>
        <div class="text">Some random text will go here.</div>
      </div>
      <div class="content">
        <div class="card"></div>
        <div class="text">Some random text will go here.</div>
      </div>
    </div>
  </div>
  <div class="quote"></div>
  <div class="callToAction"></div>
  <div class="footer"></div>
</body>

</html>

【问题讨论】：

如果您找到了有效的答案，请将其标记为正确 :)

标签： html css flexbox

【解决方案1】：

尝试在.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;
}

【讨论】：

谢谢。它奏效了。
align-items: start; 没有完整的浏览器支持。
@BeanBoy 感谢您的指正

【解决方案2】：

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

您将align-items 设置为center 而不是flex-start。现在它将对齐顶行的项目。

【讨论】：