时间戳

首页 > 解决方案 > flex-direction: row - 相同高度的孩子

css - flex-direction: row - 相同高度的孩子

问题描述

怎么可能让.childs 都具有相同的高度。height: 100%不工作，也不工作flex-grow: 1。使用 flexbox 的推荐方法是什么？

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 800px;
}

.child {
  width: 150px;
  background-color: green;
  border: solid 1px black;
}
<div class="parent">
  <div class="child">
    Short Text
  </div>
  <div class="child">
    Long Text: Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
  </div>
  <div class="child">
    Short Text
  </div>
</div>

标签： cssflexbox

解决方案

从父级中删除align-items:centerflex 属性并为子级添加 flex 属性以使其内容对齐。

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 800px;
}

.child {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  width: 150px;
  background-color: green;
  border: solid 1px black;
}
<div class="parent">
  <div class="child">
    Short Text
  </div>
  <div class="child">
    Long Text: Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
  </div>
  <div class="child">
    Short Text
  </div>
</div>

推荐阅读