如何用css选择单独一行的元素？ [复制]答案

【问题标题】：How to select the elements that are alone in a row with css? [duplicate]如何用css选择单独一行的元素？ [复制]
【发布时间】：2020-04-09 05:23:48
【问题描述】：

我正在使用 flexbox 制作网页的网格，而不是添加断点，我认为最好选择连续单独的元素。例如，使用 flex-wrap:wrap，选择最终成为一行的元素。

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

.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;
   }
}

【问题讨论】：

长话短说，CSS 不可能

标签： css layout flexbox css-selectors

【解决方案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>

【讨论】：