究竟是什么标识了网站访问者？

Question

Yuri

Asked:2020-07-10 21:37:48 +0000 UTC2020-07-10 21:37:48 +0000 UTC 2020-07-10 21:37:48 +0000 UTC

Flexbox 项目 - 换行符

772

有一个 Flexbox 网格。

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
</div>

如何换.new-string行和它后面的元素一起换行？

6 个回答

Voted

Vadim Ovchinnikov · Answer 1 · 2020-07-11T02:53:14Z

_{对 enSO 的响应的翻译。}

译者注：弹性元素（flex item）是带有的块的直接子元素display: flex。

最简单和最可靠的解决方案是在正确的位置插入弹性项目。如果它们足够宽 ( width: 100%)，它们将创建一个换行符。

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

但它很丑陋而且不符合语义。相反，我们可以在 flex 容器内生成伪元素，并使用属性order将它们移动到正确的位置。

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  background: silver;
}
.container::before, .container::after {
  content: '';
  width: 100%;
  order: 1;
}
.item:nth-child(n + 4) {
  order: 1;
}
.item:nth-child(n + 7) {
  order: 2;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

但是有一个限制：一个 flex 容器只能有伪元素::before和::after. 这意味着我们只能创建 2 个换行符。

要解决这个问题，您可以在 flex 项目而不是 flex 容器中生成伪元素。这样你就不会被限制为两个。但是这些伪元素不会是弹性项目，所以它们不会创建换行符。

但幸运的是，引入了CSS Display L3 display: contents规范（目前仅受 Firefox 37 支持）：

元素本身不生成任何框，但它的子元素和伪元素照常生成框。出于块生成和布局的目的，该元素将被视为已被文档树中的子元素和伪元素替换。

因此，您可以将display: contentsflex 容器应用于子容器，并将每个容器的内容包装在一个额外的块中。所以弹性项目将是这些额外的包装器和子伪元素。

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  display: contents;
}
.item > div {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) > div {
  background: silver;
}
.item:nth-child(3n)::after {
  content: '';
  width: 100%;
}

<div class="container">
  <div class="item"><div>1</div></div>
  <div class="item"><div>2</div></div>
  <div class="item"><div>3</div></div>
  <div class="item"><div>4</div></div>
  <div class="item"><div>5</div></div>
  <div class="item"><div>6</div></div>
  <div class="item"><div>7</div></div>
  <div class="item"><div>8</div></div>
  <div class="item"><div>9</div></div>
  <div class="item"><div>10</div></div>
</div>

此外，与Fragmenting Flex Layout和CSS Fragmentation break-before一致，flexbox 允许使用break-after或它们在 CSS 2.1 中的别名进行强制换行：

.item:nth-child(3n) {
  page-break-after: always; /* Синтаксис CSS 2.1 */
  break-after: always; /* Новый синтаксис */
}

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  page-break-after: always;
  background: silver;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

flexbox 中的强制换行尚未得到广泛支持，但它们在 Firefox 中有效。

Cheg · Answer 2 · 2020-07-10T21:55:00Z

Cheg

2020-07-10T21:55:00Z2020-07-10T21:55:00Z

flexbox不幸的是，不强，但我记得这个技巧：

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
  
}

.flex:after {
  content:'';
  width:100%;
  order:0;
}

.item.new-string,
.item.new-string ~ .item {
  order:1;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

5

Yuri · Answer 3 · 2020-07-10T22:22:00Z

Yuri

2020-07-10T22:22:00Z2020-07-10T22:22:00Z

通过添加 break 元素解决

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}

.new-string {
  width: 100%;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="new-string"></div>
  <div class="item"></div>
</div>

5

Alex · Answer 4 · 2020-07-10T22:06:04Z

Alex

2020-07-10T22:06:04Z2020-07-10T22:06:04Z

也许尝试玩一个有边距的线程？

.flex {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 2px solid blue;
}
.item:nth-child(2) {
  margin-right: calc(100% - 125px);
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item new-string"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

3

Марія Чудовська · Answer 5 · 2020-10-02T19:50:54Z

Марія Чудовська

2020-10-02T19:50:54Z2020-10-02T19:50:54Z

.container {
  display: flex;   
  flex-wrap: wrap;
  justify-content: center;
}

这应该足够了！

3

Александр · Answer 6 · 2020-03-30T10:12:15Z

Александр

2020-03-30T10:12:15Z2020-03-30T10:12:15Z

您可以在标记中插入一条水平线

flex hr {
  width: 100%;
  border: 0;
}

<div class="flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <hr>
  <div class="item new-string">item new-string</div>
</div>

0

Flexbox 项目 - 换行符

Python 3.6 - 安装 MySQL (Windows)

C++ 编写程序“计算单个岛屿”。填充一个二维数组 12x12 0 和 1

返回指针的函数

我使用 django 管理面板添加图像，但它没有显示

这些条目是什么意思，它们的完整等效项是什么样的

浏览器仍然缓存文件数据

在 Excel VBA 中激活工作表的问题

为什么内置类型中包含复数而小数不包含？

获得唯一途径

告诉我一个像幻灯片一样创建滚动的库

Flexbox 项目 - 换行符

6 个回答

相关问题