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

415
Dinh 2014-12-18 18:29.

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

8 answers

422
Asim K T 2016-01-23 00:40.

align-itemsフレックスボックスのプロパティは、主軸に沿った場合と同じように、クロス軸に沿ってフレックスコンテナ内のアイテムを整列しますjustify-content。(デフォルトでflex-direction: rowは、十字軸は垂直に対応し、主軸は水平に対応します。flex-direction: columnこれら2つはそれぞれ交換されます)。

align-items:center外観の例を次に示します。

ただしalign-content、マルチラインフレキシブルボックス用です。アイテムが1行にある場合は効果がありません。値に応じて構造全体を整列させます。以下に例を示しalign-content: space-around;ます。

そしてalign-content: space-around;、これalign-items:centerがルックスの方法です:

3番目のボックスと最初の行の他のすべてのボックスがその行の垂直方向の中央に変更されることに注意してください。

遊ぶためのいくつかのcodepenリンクは次のとおりです。

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

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

ここだあなたはフレキシボックス内のほとんどすべてと遊ぶことができますショーや超クールなペンが。

109
Alireza Fattahi 2017-08-17 02:06.

flexboxfroggy.comの例は非常に便利だと思います。

それはあなたに10-20分かかります、そしてレベル21であなたはあなたの質問への答えを見つけるでしょう。それは言及しました:

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

70
Uday Hiwarale 2016-05-30 00:46.

まず、align-items1行のアイテム用です。したがって、主軸上の要素の1つの行に対してalign-itemsこれらのアイテムをそれぞれ互いに整列させ、次の行からの新しい視点から開始します。

これalign-contentで、行のアイテムには干渉しませんが、行自体には干渉します。したがって、align-content行を相互に整列させ、コンテナをフレックスしようとします。

このフィドルを確認してください:https//jsfiddle.net/htym5zkn/8/

25
Shan Dou 2018-12-27 13:00.

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

  1. フレックスコンテナ自体には高さの制約(例min-height: 60rem)があるため、コンテンツに対して高すぎる可能性があります
  2. コンテナに入れられた子アイテムの高さ不均一

条件1content、親コンテナーとの相対的な意味を理解するのに役立ちます。コンテンツがコンテナと同じ高さになると、からのポジショニング効果を確認できなくなりますalign-content。クロス軸に沿って余分なスペースがある場合にのみ、その効果がわかり始めます。これは、親コンテナの境界を基準にしてコンテンツを整列させます。

条件2は、次の効果を視覚化するのに役立ちますalign-items。アイテムを相互に整列させます。


これがコード例です。原材料は、Wes BosのCSSグリッドチュートリアル(21.Flexboxと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行目に注意してください。アイテムがどのように中央に配置されているかを確認してください。

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


これらの例はflexboxに基づいていますが、同じ原則がCSSグリッドにも適用できます。お役に立てれば :)

13
TheNegative 2015-06-20 09:54.

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

align-contentそれの値が伸びている場合、列の行方向または幅のために、ラインの高さを変更したりするためのライン間又は周囲に空きスペースを追加することができspace-betweenspace-aroundflex-startflex-end values

align-itemsラインの領域内でアイテムの高さや位置を変更できます。アイテムがラップされていない場合、その領域は常にフレックスボックス領域に引き伸ばされる1行のみであり(アイテムがオーバーフローした場合でも)、align-content1行には影響しません。したがって、ラップされていないアイテムには影響せずalign-items、すべてが1行にある場合にのみ、アイテムの位置を変更したり、アイテムをストレッチしたりできます。

ただし、それらが折り返されている場合は、各行の中に複数の行とアイテムがあります。また、各行のすべてのアイテムの高さが(行方向に対して)同じである場合、その行の高さはそれらのアイテムの高さと等しくなり、align-items値を変更しても効果は見られません。

したがってalign-items、アイテムがラップされて同じ高さ(行方向)になるまでにアイテムに影響を与えたい場合は、最初にalign-contentストレッチ値を使用してライン領域を拡張する必要があります。

9
ahnbizcad 2016-08-26 06:39.

整列コンテンツ

align-content対照交差軸(すなわち、垂直方向場合flex-directionでありrow、水平場合flex-directionであるcolumn)の位置決め複数互いに対してライン。

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

整列アイテム

align-items フレックス要素の個々の線の交差軸を制御します。

(段落の個々の行が、通常のテキストと数式のような背の高いテキストを含む場合、どのように配置されるかを考えてください。その場合、行の各タイプのテキストの下部、上部、または中央になります。整列しますか?)

2
bajran 2020-05-04 19:53.

私がすべての答えとブログを訪問することから学んだことは

交差軸と主軸は何ですか

  • 主軸は水平方向の行で、交差軸は垂直方向の列です- flex-direction: row
  • 主軸は垂直列で、交差軸は水平行です- flex-direction: column

今すぐalign-contentとalign-items

align-contentは行用であり、コンテナーに(複数の行)align-contentのプロパティがある場合に機能します

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

align-itemsは、align-itemsの行プロパティのアイテム用です。

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

詳細については、flexをご覧ください。

1
run_the_race 2020-06-23 00:35.

いくつかの回答を読んだ後align-content、フレックスコンテンツがラップされていなくても影響がないことを正しく識別します。ただし、align-itemsラップされたコンテンツがある場合、彼らが理解していないことは依然として重要な役割を果たします。

次の2つの例でalign-itemsは、を使用し各行のアイテムを中央に配置し、変更align-contentしてその効果を確認します。

例1:

align-content: flex-start;

例2:

    align-content: flex-end;

コードは次のとおりです。

<div class="container">
    <div class="child" style="height: 30px;">1</div>
    <div class="child" style="height: 50px;">2</div>
    <div class="child" style="height: 60px;">3</div>
    <div class="child" style="height: 40px;">4</div>
    <div class="child" style="height: 50px;">5</div>
    <div class="child" style="height: 20px;">6</div>
    <div class="child" style="height: 90px;">7</div>
    <div class="child" style="height: 50px;">8</div>
    <div class="child" style="height: 30px;">9</div>
    <div class="child" style="height: 40px;">10</div>
    <div class="child" style="height: 30px;">11</div>
    <div class="child" style="height: 60px;">12</div>
</div>

<style>
.container {
    display: flex;
    width: 300px;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: flex-end;
    background: lightgray;
    height: 400px;
}
.child {
    padding: 12px;
    background: red;
    border: solid 1px black;
}
</style>

Related questions

MORE COOL STUFF

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ねえNFL、ジョーバロウとカイラーマレーは女性の権利をサポートするために少しの助けを使うことができます

ジョー・バロウロー対ウェイド事件の転覆に対応するNFLは、言葉を言わないことで、腹立たしいが予測可能なPRの結果でした。

別の日、別のヒンジのないLIV記者会見

別の日、別のヒンジのないLIV記者会見

(lから)パット・ペレス、ブルックス・ケプカ、パトリック・リードサウジアラビアのLIVゴルフリーグのさらに別の信じられないほどの記者会見で、スポーツのファンはブルックス・ケプカからでたらめな吐き気と質問回避の驚異的なマスタークラスを受けました。パトリックリード、ブライソンデシャンボー、パットペレス、最近のPGAツアーの脱北者。

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

ミズ・マーベルの家族の帰郷は悪役よりも激しく打撃を与える

レッドダガーとマーベルさんがチームを組んでいます。

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

6億7500万ドルのビットコインローンのデフォルト後にすべての資産を清算するように命じられたスリーアローズキャピタル

暗号業界最大の沈没船の1つであるスリーアローズキャピタルは、ついにその悲惨さから解放されています。火曜日に、不良債権ヘッジファンドは、債権者からの返済を要求する訴訟の高まりに応えて、バージンアイランド裁判所によって清算を命じられました彼らが3ACに行ったローン。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

Suffragettes Indicam #3: Junho

Suffragettes Indicam #3: Junho

Mais um mês se findando — e metade do ano de 2022 já passou. Sabe o que isso significa? Não, não é hora de verificar se você está cumprindo com suas resoluções de Ano Novo.

多元宇宙—Junø

多元宇宙—Junø

チェーン間アカウントがJunoに登場します。異なるブロックチェーン間でスマートコントラクトの構成可能性と真の相互運用性を提供します。

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

#brand【ベター・コール・ソール!アメリカのテレビシリーズ「ブレイキング・バッド」に最高のビジネス例が隠されている】・・・ルールクリエイティブ

1.ドラマを見た後、起業する考えはありますか?あなたのビジネスはボトルネックに遭遇しましたか?方向性がなくてわからない場合は、ドラマを追いかけて行くことを心からお勧めします。(?)ブラフではなく、最も完璧なビジネス例を隠すドラマがあります。2.ブレイキング・バッドとその弁護士ドラマ「ブレイキング・バッド」を見た友人たちは、演劇の中で、穏やかな表情で、弁護士のソウル・グッドマンに深く感銘を受けなければなりません。口を開けて、感覚の弱い傭兵の性格を持っています。道徳の面で、サル・グッドマンは無意識のうちに劇に欠かせない役割を果たし、彼自身のシリーズ「絶望的な弁護士」(ベター・コール・ソール)を生み出しました。ウェントウのテキストとビデオは、劇中のソウル・グッドマンのテレビコマーシャルです。製品(サービス)、競争戦略、市場ポジショニング、ブランド名、ターゲット顧客グループ、コミュニケーション軸から広告まで、サル・グッドマンの役割のビジネス設定は、「最低」と見なすことができる超超超超超超完全です。ブランドコミュニケーションのコスト」「変化」のモデル。なぜ?私の分析をご覧ください。3.ソウル・グッドマンの「事業戦略」1.基本情報ブランド名:Saul Goodman製品:法律相談サービス対象顧客:麻薬中毒、飲酒運転、事故など。法律知識の欠如は、一般的に公立弁護士にしか余裕がなく、真面目な弁護士も「特別な法律を持つ消費者」を避けます。恐れてはいけない「​​ニーズ」。コミュニケーションの主軸:この国のすべての男性、女性、子供は有罪判決を受けるまで無実だと思います。地域:アルバカーキ市スローガン:Thrallに電話したほうがいいです!(ベター・コール・ソール)広告:2つの可能性のある犯罪状況をシミュレートします+サウルの主張+サウルのスローガン2をより適切に呼び出します。

メインネットガイド— Arbitrum Odyssey Week 2

メインネットガイド— Arbitrum Odyssey Week 2

最新のアップデートを受け取るために私たちに従ってください。ニュースレター:https://www。

Language