使用CSS Flex使行中的元素高度相等

Question

我正在尝试使用 flex 使黄色背景元素与行中其他元素高度相同，但在这种设计中无法解决问题。 li 元素只是不能达到完整的高度。

运行代码段以查看我在说什么。 谢谢！

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  width: 90%;
  padding: 0;
  margin: 0 auto;
  font-size: 0;
}

.wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.header {
  background: yellow;
  flex: 1;
  font-size: 13px;
  width: 100%;
}

.body {
  font-size: 13px;
  border: 1px solid orange;
  background: lightblue;
  width: 100%;
}

.liWrapper {
  display: inline-flex;
  width: 25%;
  min-width: 25%;
  margin: 10px 0 0 0;
  padding: 0;
}

<div id="main">
  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef e</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wefwf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
      <div class="body">picture</div>
    </div>
  </div>

  <div class="liWrapper">
    <div class="wrapper">
      <div class="header">Title fwef wef</div>
      <div class="body">Body</div>
    </div>
  </div>
</div>

- Boy

---

https://dev59.com/xZHea4cB1Zd3GeqPm0SQ#33815389 - Michael Benjamin

Answer 1

您需要添加一个 标签。

display: flex;
flex-wrap: wrap;

将内容移动到#main（这也包含了一个隐式的flex-direction: row;）。您希望每个.wrapper的高度都相同，但是您没有任何样式告诉它们如何实现。在.wrapper上的display: flex;和flex-direction: column;仅告诉该包装器将其高度分配给其子元素。如果它的高度不正确，则不会自动出现更多高度。

默认情况下，flex行和换行使所有子元素具有相等的高度，这是您想要的行为。 :)

        html, body {
            height: 100%;
            margin: 0; padding: 0;
        }


        #main{
            width: 90%;
            padding: 0;
            margin: 0 auto;
            font-size: 0;
            display: flex;
            flex-wrap: wrap;
        }

        .wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
        }

        .header {
            background: yellow;
            flex: 1;
            font-size: 13px;
            width: 100%;
        }

        .body {
            font-size: 13px;
            border: 1px solid orange;
            background: lightblue;
            width: 100%;
        }

        .liWrapper{
            display: inline-flex;
            width: 25%;
            min-width: 25%;
            margin: 10px 0 0 0;
            padding: 0;

        }

<div id="main">
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef e</div>
            <div class="body">picture</div>
        </div>
    </div>
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewff wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wefwf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>
    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef wef ef ewfff wefe wfew f wef fewf wef few few fwef ewf ewf w</div>
            <div class="body">picture</div>
        </div>
    </div>

    <div class="liWrapper">
        <div class="wrapper">
            <div class="header">Title fwef wef</div>
            <div class="body">Body</div>
        </div>
    </div>
</div>

- Jack Guy