使用CSS Flex使元素连续等于高度 [英] Using CSS Flex to Make Elements Equal Height in a Row

问题描述

我试图使用 flex 使黄色背景的元素与该行中的其他元素具有相同的高度，但无法通过这种设计弄清楚。 li 元素只是不希望达到全高。

I'm trying to make the the elements with yellow background same height as others in that row using flex, but cannot figure it out with this design. The li elements just dont wan't to be at full height.

运行代码片段以查看我在谈论。
谢谢！

Run the code snippet to see what I'm talking about. Thank you!

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>

推荐答案

您需要添加一个

display: flex;
flex-wrap: wrap;

至 #main （其中还包含一个隐式 flex-direction：row; ）。您期望每个 .wrapper 都具有相同的高度，但是没有任何样式告诉他们要这样做。 display：flex; 和 flex-direction：列; .wrapper上的 code>只是告诉包装器在其子元素之间分配其高度。如果高度不正确，则不会神奇地显示更多高度。

to #main (this also contains an implicit flex-direction: row;). You're expecting each of the .wrapper's to be the same height, but you don't have any styling telling them to do that. The display: flex; and flex-direction: column; on the .wrapper simply tells the wrapper to divvy up its height among its child elements. If it's not already the right height, more won't magically appear.

flex行和换行默认使所有子元素的高度相等，我认为这是行为你要。 ：）

The flex row and wrap makes all child elements equal height by default, which I assume is the behavior you want. :)

        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>

这篇关于使用CSS Flex使元素连续等于高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！