1. ホーム
  2. css

[解決済み] フレックスボックスの単一アイテムの両端揃え(justify-contentのオーバーライド)方法【重複

2022-03-14 12:44:59

質問

をオーバーライドすることができます。 align-itemsalign-self をフレックスアイテムに使用します。 を上書きする方法を探しています。 justify-content をフレックスアイテムに使用することができます。

フレックスボックスのコンテナに justify-content:flex-end にしたいが、最初の項目は justify-content: flex-start どうすればいいのでしょうか?

どのように解決するのですか?

がないようです。 justify-self を設定することで、同様の結果を得ることができます。 marginauto ¹. 例) flex-direction: row (デフォルト) を設定する必要があります。 margin-right: auto を使用すると、子プロセスを左寄せにすることができます。

.container {
  height: 100px;
  border: solid 10px skyblue;
  
  display: flex;
  justify-content: flex-end;
}
.block {
  width: 50px;
  background: tomato;
}
.justify-start {
  margin-right: auto;
}
<div class="container">
  <div class="block justify-start"></div>
  <div class="block"></div>
</div>

¹ この動作は は、Flexbox 仕様で定義されています。 .