根据内容（是否为空）调整 3 列的布局，CSS

Question

我有 3 <div> 列使用 flexbox 或 grid。

如何用 CSS 制作：

如果所有列都有内部 HTML 内容，它们共享 33% / 33% / 33% 宽度
如果一栏内部HTML内容为空，其他两栏自动占50%/50%宽度
如果两列内部HTML内容为空，则唯一非空列占100%宽度

是否可以像这样，以及特定的 flex 或 grid 选项？

.container {
 display: flex;
 width: 500px;
 background-color: green;
}

.col {
 border: 1px solid black;
 padding: 1em;
}

<div class="container">
<div class="col">
Automatic use of 2 columns
</div>
<div class="col">
(50% / 50%) because 3rd col has empty content
</div>
<div class="col">
</div>
</div>

Another:

<div class="container">
<div class="col">
Automatic use of
</div>
<div class="col">
3 columns (33% / 33% / 33%) because 3rd 
</div>
<div class="col">
col is not empty
</div>
</div>

Answer 1

一种可能的方法，如果您可以相信空 <div class="col"> 是空的（不包含任何内容，包括 white-space），如下所示：

/* a simple, generic reset to apply a consistent
   baseline to all elements, and the listed
   pseudo-elements, on the page: */
*,
 ::before,
 ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

/* generic wrapper for the content, entirely irrelevant
   to the demo's functionality; this is just to give
   a consistent visual look: */
.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  margin-block: 2em;
  margin-inline: auto;
  width: 500px;
  height: 100vh;
}

/* I've switched your background-color to a lighter one
   to allow visibility of the .container element, and to
   improve visibility of the child .col elements: */
.container {
  display: flex;
  width: 500px;
  background-color: #ffa9;
}

/* I added the 'flex-grow' property to allow the
   .col elements to expan to fill the available
   space: */
.col {
  padding: 1em;
  flex-grow: 1;
}

/* different background-colours for the elements: */
.col:nth-child(1) {
  background-color: red;
}

.col:nth-child(2) {
  background-color: green;
}

.col:nth-child(3) {
  background-color: blue;
}

/* hiding any empty .col elements; note that these
   elements must have no content at all, this
   includes white-space (unfortunately): */
.col:empty {
  display: none;
}

<div class="wrap">
  <div class="container">
    <div class="col">
      50%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col"></div>
  </div>

  <div class="container">
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
  </div>

  <div class="container">
    <div class="col">
      100%
    </div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

JS Fiddle demo.

值得注意的是，CSS Grid 也可以做到这一点，与 :empty select 或：

的要求相同

*, ::before, ::after {
  box-sizing: border-box;
  font: normal 1rem / 1.5 sans-serif;
  margin: 0;
  padding: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2em;
  margin-block: 2em;
  margin-inline: auto;
  width: 500px;
  height: 100vh;
}

.container {
/* here we use display: grid: */
 display: grid;
/* specify that the grid-items should flow into
   columns rather than their default (rows): */
 grid-auto-flow: column;
 width: 500px;
 background-color: #ffa9;
}

.col {
/* and we remove the 'flex-grow' property, as it
   doesn't affect CSS grid layout: */
 padding: 1em;
}

.col:nth-child(1) {
  background-color: red;
}

.col:nth-child(2) {
  background-color: green;
}

.col:nth-child(3) {
  background-color: blue;
}

.col:empty {
   display: none;
}

<div class="wrap">
  <div class="container">
    <div class="col">
      50%
    </div>
    <div class="col">
      50%
    </div>
    <div class="col"></div>
  </div>

  <div class="container">
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
    <div class="col">
      33.3%
    </div>
  </div>

  <div class="container">
    <div class="col">
      100%
    </div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

JS Fiddle demo.

请注意，在 [Selectors Level 4] 中，:empty 的行为将更改为仅包含 white-space:

的 select 元素

The :empty pseudo-class represents an element that has no children except, optionally, document white space characters. In terms of the document tree, only element nodes and content nodes (such as [DOM] text nodes, and entity references) whose data has a non-zero length must be considered as affecting emptiness; comments, processing instructions, and other nodes must not affect whether an element is considered empty or not.

Examples: p:empty is a valid representation of the p elements in the following HTML fragment:

<p></p>
<p>
<p> </p>
<p></p>

参考文献：

参考书目：

:empty, Selectors Level 4.
"Selectors Level 4," W3C.

根据内容（是否为空）调整 3 列的布局，CSS

Adapt 3 columns' layout based on the content (being empty or not), with CSS

css

flexbox

css-grid