css flexbox 对齐内容答案

【问题标题】：css flexbox justify-contentcss flexbox 对齐内容
【发布时间】：2021-04-09 17:37:53
【问题描述】：

我有一个由flexbox 制成的单杠。

如果有2个或更多项目，我希望每个项目尽可能分开，所以我设置justify-content: space-between。

但是如果只有1个项目，我希望项目放在最后，所以我设置justify-content: flex-end。

项目从左到右排序。所以设置flex-direction: row-reverse 是行不通的。

如何组合第一、第二和第三项？项目是动态添加/删除的。

【问题讨论】：

您可以使用JS根据编号动态添加您的样式。项目
flexbox 无法真正做到这一点。如果您正在动态生成内容，则可以向包装元素添加一个类以表示单个元素并使用justify-content: flex-end。 stackoverflow.com/questions/49658425/…

标签： html css flexbox

【解决方案1】：

利用:only-child

.wrap {
  display: flex;
  margin-bottom: 1em;
  justify-content: space-between;
  width: 50%;
  border: 1px solid grey;
  padding: .25em;
}

.item {
  border: 1px solid red;
  padding: 1em;
  background: pink;
}

.item:only-child {
  margin-left: auto;
}

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
  <div class="item"></div>
</div>

<div class="wrap">
  <div class="item"></div>
</div>

【讨论】：

使用margin-left:auto 是个好主意，但我更喜欢使用margin-inline-start:auto。如果页面的方向旋转 90 度，则左侧变为顶部。 margin-inline-start 比 margin-left 有旋转证明。
@YunusKurniawan 不支持 IE，尽管 IE 已被弃用，但很多公司仍然支持它
只需声明两次作为后备

【解决方案2】：

您可以使用+ 来执行此操作，该+ 会选择下一个兄弟。该方法使用justify-content: flex-end

.flex {
  display: flex;
  justify-content: flex-end;
  background: grey;
}

.item+.item {
  margin-left: auto;
}

.item {
  width: 10px;
  height: 10px;
  background: red;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">

  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

或

您还可以使用:first-child:last-child 定位第一个孩子，这允许您以不同的方式进行设置。此方法使用justify-content: space-between

.flex {
  display: flex;
  justify-content: space-between;
  background: grey;
}

.item {
  width: 10px;
  height: 10px;
  background: red;
}

.item:first-child:last-child {
  margin-left: auto;
}

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">

  <div class="item"></div>
</div>

<br/><br/><br/>

<div class="flex">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

【讨论】：

【解决方案3】：

感谢@Paulie_D

这个想法是使用margin-left（或margin-inline-start）和:first-child:last-child（唯一的孩子）的组合。

我花了几个小时来解决这个问题，但没有成功。现在可以了！

【讨论】：

【解决方案4】：

也许在第一项上使用justify-self: flex-end;

.items {
    justify-content: space-between;
    .item:first-of-type {
        justify-self: flex-end;
    }
}

【讨论】：

justify-self 不适用于 flexbox：stackoverflow.com/questions/49658425/…
使用display: grid;或者JS是最好的方式
使用 flex 很容易做到
带角度：<div class="items" [ngStyle]="justify-content: items.length > 1 ? 'space-between' : 'flex-end'" >