Question

我已经暂时停留在这个问题上一段时间了，尽管有许多类似的问题，我还没有成功解决问题。

根据我的理解，Flexbox系统应该通过简单地将display: flex添加到父元素来自动计算子元素的高度，如下所示：

＆＃13;

.list {
  height: 100vh;
  position: relative;
  background-color: #edf2f6;
  width: 300px;
  overflow-x: hidden;
}

.list-search {
  height: 50px;
  width: 300px;
  display: flex;
}

.list-search-input {
  flex: 4;
}

.list-search-button {
  flex: 1;
  background-color: #354052;
  color: #edf2f6;
  cursor: pointer;
}

＆＃13;

<div class="list">
  <div class="list-search">
    <input class="list-search-input" placeholder="search" >
    <span class="list-search-button">Go</span>
  </div>
  
  <div style="width: 300px; height: 50px; padding-top: 10px;">
    <p>
     content yada yada yada
    </p>
  </div>
</div>

＆＃13;

但是，您会看到按钮内的文字没有居中垂直居中。因此，为了纠正这一点，并且如SO上的众多答案所述，我们将align-items: center;添加到父级。但是，添加后，两列都会失去高度：

＆＃13;

.list {
  height: 100vh;
  position: relative;
  background-color: #edf2f6;
  width: 300px;
  overflow-x: hidden;
}

.list-search {
  height: 50px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-search-input {
  flex: 4;
}

.list-search-button {
  flex: 1;
  background-color: #354052;
  color: #edf2f6;
  cursor: pointer;
  text-align: center;
}

＆＃13;

<div class="list">
  <div class="list-search">
    <input class="list-search-input" placeholder="search">
    <span class="list-search-button">Go</span>
  </div>
  
  <div style="width: 300px; height: 50px; padding-top: 10px;">
    <p>
     content yada yada yada
    </p>
  </div>
</div>

＆＃13;

我在CSS中做错了什么？如何实现父级100％高度的列和按钮内垂直对齐的文本？

Css属性align-items：Flexbox中心丢失列的高度

0 个答案: