Flexbox UL LI分为两列，第一列的内容右对齐，第二列的内容左对齐

Question

我需要有关flexbox ul和li列的帮助，它们的内容会对齐。实际上，如果可以将一个UL分为两列，我想使用column-count。将ul作为容器保存的Flex-wrapper需要将整个UL列表（内容）居中，但第一列和第二列的内容对齐必须相反。我被困在另一列上。有什么建议吗？

                          (flex-wrapper) align: center  



       text-align:right ( column 1 )    ( column 2 ) text-align: left

<div class="flex-wrapper">
  <ul>
    <li>Fully air-conditioned</li>
    <li>Free private parking area</li>
    <li>Free outdoor shower</li>
    <li>Free barbecue on disposal</li>
    <li>Free Wi-Fi Internet</li>
    <li>Multilingual host</li>
    <li>Free local TV and SatTV stations</li>
    <li>Pets are not allowed</li>
    <li>Smoking allowed outdoor</li>
  </ul>
</div>

.flex-wrapper {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  text-align: center;
  list-style-type: none;
  list-style-image: none;
  margin: 0;
}

.flex-wrapper ul li {
  text-align: right;
  margin-bottom: 0;
  padding: 4px 0 4px 0;
  width: 100%;
  font-size: 22px;
  line-height: 30px;
}

Answer 1

像这样使用CSS：nth-​​child选择器：

.flex-wrapper ul li:nth-child(1) {
    text-align: right;
}

.flex-wrapper ul li:nth-child(2) {
    text-align: left;
}