在 flex 结构中添加分组标签

Question

我得到了以下输入结构：

css

.form-content {
  clear: both;
  width: 100%;

  .form-flex-col-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .form-flex-col-content {
      flex: 1 1 32%;
      padding: 0 10px;
    }
  }
}

html

<div class="form-flex-col-container">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</div>

而且渲染效果很好。但是，我想引入一个新标签来“分组”我的 .form-flex-col-content 块（以提供 angular formControl 指令）。像这样：

<div class="form-flex-col-container">
<span [formGroup]="myFormA">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
<span [formGroup]="myFormB">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
</div>

但它破坏了 flex 显示。

有没有 tag/style 我可以使用的不会破坏 flex 显示的东西？

干杯！

Answer 1

您可以将 display: contents 添加到包装内容的 <span> 中，以使其对布局有效地透明，尽管这确实带有可访问性警告，不幸的是：

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

.form-flex-col-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  outline: 2px solid #f90;
}

.form-flex-col-container span {
  display: contents;
}

.form-flex-col-content {
  flex: 1 1 32%;
  padding-block: 10px;
  outline: 2px solid palegreen;
}

<div class="form-flex-col-container">
<span [formGroup]="myFormA">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
<span [formGroup]="myFormB">
  <div class="form-flex-col-content">
    ... my input
  </div>
  <div class="form-flex-col-content">
    ... my input
  </div>
</span>
</div>

JS Fiddle demo.

These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that the CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details.

Due to a bug in browsers, this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display#box

参考文献：

display.

在 flex 结构中添加分组标签

Add grouping tags in flex structure

html

css

flexbox