Question

我尝试使用flex制作黄色背景与该行中其他元素高度相同的元素，但无法通过此设计弄清楚。 li元素不会达到最高点。

运行代码段以查看我正在谈论的内容。谢谢！

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您需要添加

display: flex;
flex-wrap: wrap;

到#main（这也包含隐式flex-direction: row;）。你期望每个.wrapper都是相同的高度，但你没有任何样式告诉他们这样做。 display: flex;上的flex-direction: column;和.wrapper只是告诉包装器在其子元素中分配其高度。如果它不是正确的高度，那么就不会出现更多的高度。

弹性行和换行使默认情况下所有子元素都相等，我假设这是你想要的行为。：）

        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使元素在一行中具有相同的高度

1 个答案: