Question

我有两个“Splits”使用flex-grow，如果只有一个，则为100％，如果两个都存在，则为50％/ 50％。问题是我希望此行为取决于div.split中内容的存在。

通过一些摆弄，我可以让它做到适当的扩展高度或正确删除内容，但不能同时删除。

内容DOM结构确实需要保持不变。如果需要，也许可以添加额外的包装器。我试图用一个纯CSS解决方案来解决这个问题。

CSS：

body {
  border: 1px solid black;
  display: flex;
  width: 100vw;
}

section {
  display: flex;
  flex-direction: column;
  width: 100vw;
}

.split {
  width: 100vw;
  display: flex;
  flex: 1;
}

.content {
  /* probably something here? */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
  nav { background-color: steelblue; }

HTML：

<body>
  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>
</body>

Answer 1

当JSBin演示填充视口时，有两种解决方案可以解决这个问题。

内联代码的解决方案，其中section不会填充视口。

您应使用flex-grow: 1;，而不是flex: 1，与flex: 1一样，与flex: 1 1 0相同， flex-basis 是0，当灵活项目 flex-grow 基于其内容为0时，因此占用相等的空间。

或者您可以使用flex: 1 1 auto。

Src：https://www.w3.org/TR/css-flexbox-1/#flex-common

Stack snippet - 包含内容

＆＃13;

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex-grow: 1;                 /*  or "flex: 1 1 auto"  */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

＆＃13;

  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

＆＃13;

Stack snippet - 没有内容

＆＃13;

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex-grow: 1;                 /*  or "flex: 1 1 auto"  */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

＆＃13;

  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

＆＃13;

JSBin的解决方案，section填充视口

使用:empty选择器，当split为空时，将其更改为flex: 0。

Stack snippet - 包含内容

＆＃13;

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  height: 100vh;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex: 1;
}

.split:empty {
  flex: 0;
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

＆＃13;

<section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

＆＃13;

Stack snippet - 没有内容

＆＃13;

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  height: 100vh;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex: 1;
}

.split:empty {
  flex: 0;
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

＆＃13;

<section>

    <div class="split pink"></div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

＆＃13;

灵活增长取决于子内容的存在

1 个答案: