如何使用css选择单独排在一行中的元素?

Question

我正在使用flexbox来制作网页的网格，而不是添加断点，我认为最好选择一行中单独的元素。例如，使用弹性换行：换行，选择最终在一行中成为单独元素的元素。

我所期望但不存在的示例：

.row {
display: flex;
align-items: center;
justify-items: flex-start;
flex-wrap: wrap;
}
.row > .column {
margin: 15px;
width: auto;
&:alone-in-row { // HERE 
width: 100%;
text-align: center;
}
}

Answer 1

您可以使用:only-child伪选择器：

.row {
display: flex;
align-items: center;
justify-items: flex-start;
flex-wrap: wrap;
}
.row .column {
margin: 15px;
width: auto;
}
.row .column:only-child {
width: 100%;
text-align: center;
}

<table>
<tr class="row">
<td class="column">1</td>
<td class="column">2</td>
</tr>
<tr class="row">
<td class="column">1</td>
</tr>
</table>