web-dev-qa-db-ja.com

align-contentとalign-itemsの違いは何ですか？

align-itemsとalign-contentの違いを誰かに教えてもらえますか？

csscss3layoutflexboxalignment
242
Dinh

Flex-boxのalign-itemsプロパティは、justify-contentが主軸に沿って行うのと同じように、横軸に沿ってフレックスコンテナ内の項目を揃えます。 （デフォルトのflex-direction: rowでは、交差軸は垂直に対応し、主軸は水平に対応します。flex-direction: columnでは、これら2つはそれぞれ入れ替えられます）。

これがalign-items:centerの外観の例です。

align-items: center

しかし、align-contentは複数行のフレキシブルボックス用です。項目が1行になっている場合は効果がありません。値に従って構造全体を整列させます。これがalign-content: space-around;の例です。 enter image description here

そして、align-content: space-around;とalign-items:centerの組み合わせは次のようになります。 enter image description here

1行目の3番目のボックスと他のすべてのボックスは、その行の中央に垂直に変更されます。

ここで遊ぶためにいくつかのcodepenリンクがあります：

http://codepen.io/asim-coder/pen/MKQWbb

http://codepen.io/asim-coder/pen/WrMNWR

ここ flexboxのほとんどすべてを表示して遊べる、かっこいいペン。

257
Asim K T

まず、align-itemsは単一行の項目用です。つまり、主軸上の要素の単一行の場合、align-itemsはこれらの項目をそれぞれ互いに位置合わせし、次の行からの新しい視点から開始します。

現在、align-contentは行内の項目に干渉しませんが、行自体には干渉しません。そのため、align-contentは、互いに対して行を整列させ、コンテナをフレックスしようとします。

このフィドルをチェックしてください。 https://jsfiddle.net/htym5zkn/8/

53
Uday Hiwarale

私はその例を見つけました http://flexboxfroggy.com/ とても役に立ちます。

それはあなたに10-20分かかり、レベル21であなたの質問に対する答えを見つけるでしょう。それは述べた：

align-contentは行間を決定し、align-itemsは行間を決定アイテム全体がコンテナ内でどのように配置されているか。 1行しかない場合、align-contentは効果がありません

42
Alireza Fattahi

私のブラウザでそれらを調べました。

align-contentは、値が伸びているときに行方向の行の高さまたは列の幅を変更することができます。あるいは、space-between、space-around、flex-start、flex-end valuesの行の間または周りに空白スペースを追加することができます。

align-itemsはアイテムの高さや行の領域内の位置を変更することができます。項目が折り返されていない場合、項目は1行しかなく、その項目は常にフレックスボックス領域に引き伸ばされ（項目がオーバーフローした場合でも）、align-contentは1行には影響しません。そのため、折り返されていない項目には効果がなく、align-itemsだけが項目の位置を変更したり、それらがすべて1行になったときにそれらを引き伸ばすことができます。

ただし、折り返されている場合は、各行の中に複数の行と項目があります。また、各行のすべての項目の高さが同じ（行方向）の場合、その行の高さはそれらの項目の高さと等しくなり、align-items値を変更しても効果はありません。

そのため、項目が折り返されたときにalign-itemsによって項目に影響を与え、（行方向の）同じ高さを最初に持つ場合は、線領域を拡大するためにalign-contentをストレッチ値で使用する必要があります。

10
TheNegative

align-content

align-contentは、交差軸（つまり、flex-directionがrowの場合は垂直方向、flex-directionがcolumnの場合は水平方向）を制御します。複数行の相対的な位置。

（段落の行が垂直方向に広がり、上に向かって積み重ねられ、下に向かって積み重ねられていると考えてください。これはflex-direction行パラダイムの下にあります）。

align-items

align-itemsは個々のflex要素の行の交差軸を制御します。

（段落の個々の行が、普通のテキストと数学の方程式のような高さのあるテキストを含む場合、どのように配置されるかを考えてください。その場合、行の各タイプのテキストの下、上、または中央になります。整列されますか？）

4
ahnbizcad

私は同じ混乱をしました。上記の答えの多くに基づいて少し手を加えた後、私はついに違いを見ることができます。私の控え目な意見では、この区別は次の2つの条件を満たすフレックスコンテナで最もよく実証されています。

  1. フレックスコンテナ自体には高さの制限があり（例：min-height: 60rem）、したがってが高すぎるその内容
  2. コンテナーに囲まれた子項目の高さが不均等

条件1は、contentがその親コン​​テナに対して何を意味するのかを理解するのに役立ちます。コンテンツがコンテナと同じ高さになると、align-contentによるポジショニング効果は見られなくなります。それは、交差軸に沿って余分なスペースがあるときだけです、その効果を見始める：それは、親コンテナの境界に対してコンテンツを整列させます。

条件2は、私がalign-itemsの効果を視覚化するのを助けます：それは互いに対してアイテムを整列させます。

これがコード例です。原材料は Wes BosのCSSグリッドチュートリアル （21.Flexbox vs. CSSグリッド）

  • HTMLの例：
  <div class="flex-container">
    <div class="item">Short</div>
    <div class="item">Longerrrrrrrrrrrrrr</div>
    <div class="item">????</div>
    <div class="item" id="tall">This is Many Words</div>
    <div class="item">Lorem, ipsum.</div>
    <div class="item">10</div>
    <div class="item">Snickers</div>
    <div class="item">Wes Is Cool</div>
    <div class="item">Short</div>
  </div>
  • CSSの例：
.flex-container {
  display: flex;
  /*dictates a min-height*/
  min-height: 60rem;
  flex-flow: row wrap;
  border: 5px solid white;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
 }

#tall {
  /*intentionally made tall*/
  min-height: 30rem;
}

.item {
  margin: 10px;
  max-height: 10rem;
}

例1：コンテンツがコンテナと同じ高さになるようにビューポートを狭めましょう。これは、コンテンツブロック全体がコンテナの内側にぴったり収まっているためalign-content: flex-start;が効果を発揮しない場合です（位置変更のための余分なスペースはありません）。

また、2行目に注意してください - 項目がどのように中心に配置されているかを確認してください。

enter image description here

例2：ビューポートを広げると、コンテナー全体を埋めるのに十分なコンテンツがなくなりました。これでalign-content: flex-start;--の効果が見え始めます。これはコンテナーの上端を基準にしてコンテンツを整列させます。 enter image description here

これらの例はflexboxに基づいていますが、同じ原則がCSSグリッドにも当てはまります。お役に立てれば ：）

2
Shan Dou

主な違いは、要素の高さが同じでない場合です。それで、あなたは行でどのように見ることができます、それらはすべて中央\ end\startです。

0
simi

私が理解したところによると ここ ：

align-itemまたはjustify-itemを使用するときは、グリッド項目内のコンテンツを列軸または行軸に沿ってそれぞれ調整します。

ただし、align-contentまたはjustify-contentを使用する場合は、列軸または行軸に沿ってグリッドの位置を設定します。大きなコンテナにグリッドがあり、幅や高さが柔軟でない（pxを使用）場合に発生します。

0
Goldenmoon