web-dev-qa-db-ja.com

フレックスボックス：フレックススタート、セルフスタート、スタート。違いは何ですか？

今まで見たことのないalign-selfプロパティの値に気づきました。 start、end、self-start、self-endとは何ですか。また、flex-startおよびflex-endとの違いは何ですか。

私は CSS-Tricksのガイド を頻繁に参照してきましたが、これらの値については触れていません。 MDNで align-selfのドキュメント を読みましたが、値の1行の説明では理解できません。

私はそれを理解するために値をいじることができるかもしれないと思いましたが、それらはすべて同じことをしているようです...

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background: papayawhip;
  width: 400px;
  height: 200px;
  margin: 1rem auto;
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
}

.block {
  color: white;
  font-size: 3em;
  font-family: sans-serif;
  padding: 0.5rem;
  margin: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-1 {
  background: red;
}

.block-2 {
  background: orange;
}

.block-3 {
  background: gold;
}

.block-4 {
  background: green;
}

.block-5 {
  background: blue;
}

.block-2 {
  align-self: flex-start;
}

.block-3 {
  align-self: start;
}

.block-4 {
  align-self: self-start;
}
<div class="container">
  <div class="block block-1">1</div>
  <div class="block block-2">2</div>
  <div class="block block-3">3</div>
  <div class="block block-4">4</div>
  <div class="block block-5">5</div>
</div>
cssflexboxcss-grid
15
Vince

その価値 flex-endおよびflex-start（とりわけ） flex layout で使用するために作成されました。

ただし、W3Cは Box Alignment Module を開発しており、これにより、配置プロパティと値の共通セットを確立し、フレックス、グリッド、テーブル、ブロックを含む複数のボックスモデル。

したがって、表示されているのは、既存のレイアウト固有の値を最終的に置き換える新しい値です。

flexbox仕様に記載されている方法は次のとおりです。

§1.2。モジュールの相互作用

CSSボックスアライメントモジュールは、アライメントプロパティ（justify-content、align-items、align-self、align-content）ここで紹介しました。

グリッド仕様にも同様の言語があります。次に例を示します。

§10.1。溝：row-gap、column-gap、およびgapプロパティ

row-gapおよびcolumn-gapプロパティ（およびそのgap省略形）をグリッドコンテナーで指定すると、グリッドの行とグリッドの列の間の間隔が定義されます。それらの構文は CSS Box Alignment 3§8Boxes Between Boxes で定義されています。

元のプロパティ– grid-row-gap、grid-column-gapおよびgrid-gap –長続きしませんでした。ただし、下位互換性のために、それらは引き続き尊重されます。

14
Michael_B

flex-startは、フレックス方向の-reverse値の存在を考慮しますが、startは考慮しません。

たとえば、フレックスコンテナーがflex-direction:row-reverseに設定された左から右への書き込みモードでは、justify-content:startはすべてのアイテムを左揃えにし、justify-content:flex-startはすべてのアイテムを揃えます。右に正当化されます。

div {
  padding: 4px;
  border: 1px solid red
}

#div1 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: start
}

#div2 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start
}
<ul>
  <li><code>align-content: start</code>
    <div id=div1>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
  <br>
  <li><code>align-content: flex-start</code>
    <div id=div2>
      <div>Flex 1</div>
      <div>Flex 2</div>
    </div>
  </li>
</ul>

2019年7月15日に編集

differentの動作は、Firefoxブラウザでは（少なくとも68まで）trueですが、diachedelic、両方のプロパティは同じように機能します

7
Henry Chan