如何在多行flexbox布局中指定换行符？

如何在多行flexbox布局中指定换行符？

最简单，最可靠的解决方案是在适当的位置插入d性项目。如果它们足够宽（

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 >  <div >1</div>  <div >2</div>  <div >3</div>  <div ></div>  <div >4</div>  <div >5</div>  <div >6</div>  <div ></div>  <div >7</div>  <div >8</div>  <div >9</div>  <div ></div>  <div >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 >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div>  <div >6</div>  <div >7</div>  <div >8</div>  <div >9</div></div>

但是有一个局限性：flex容器只能有

::before

和

::after

伪元素。这意味着您只能强制2个换行符。

为了解决这个问题，您可以在flex项目内部而不是在flex容器中生成伪元素。这样，您将不会被限制为2。但是那些伪元素不会是flex项目，因此它们将无法强制换行。

但幸运的是，引入了CSS Display L3

display:contents

（当前仅受Firefox 37支持）：

元素本身不会生成任何框，但是其子元素和伪元素仍会正常生成框。出于框生成和布局的目的，必须将元素视为在文档树中已被其子元素和伪元素替换。

因此，您可以将其应用于

display:contents

flex容器的子容器，并将每个容器的内容包装在其他包装器中。然后，d性项目将是那些额外的包装和子项的伪元素。

.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 >  <div ><div>1</div></div>  <div ><div>2</div></div>  <div ><div>3</div></div>  <div ><div>4</div></div>  <div ><div>5</div></div>  <div ><div>6</div></div>  <div ><div>7</div></div>  <div ><div>8</div></div>  <div ><div>9</div></div>  <div ><div>10</div></div></div>

另外，根据碎片的Flex布局和CSS碎片，Flexbox，就允许通过使用强制休息

break-before

，

break-after

或它们的CSS 2.1别名：

.item:nth-child(3n) {  page-break-after: always;   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 >  <div >1</div>  <div >2</div>  <div >3</div>  <div >4</div>  <div >5</div>  <div >6</div>  <div >7</div>  <div >8</div>  <div >9</div>  <div >10</div></div>

尚不广泛支持flexbox中的强制换行符，但可在Firefox上使用。