宣言書を書きました display: flex 数えられる以上の回数ですが、今でも数えられるかどうかを忘れることがあります justify-content や align-items それが縦軸を一列に制御しているのです それは無知ではありません; 行動によって反転するレイアウトモデルの正直な現実です flex-direction. 方向 が の 時 row、 justify-content 水平方向に動作します。 に切り替えます column そして、同じプロパティが垂直方向に動作するようになりました。ボックスが目的の場所に着くまで、ブラウザ開発ツールを開いてこれらの値をナッジすることはないと主張する人は、嘘をついているか、私よりもはるかに優れたメモリを持っています。
ザ・ Flexbox Generator は、このモデルを学んでいたときに私が持っていたいツールであり、スタイルシートに触れることなくレイアウトをプロトタイプしたいときに私がまだ手を伸ばしているツールです。 コンテナのプロパティを設定し、サンプル ボックスの行がリアルタイムでリフローし、表示されるものを生成する正確な CSS がその下にあるコピー対応ボックスに配置されます。 " を回します。どのプロパティが what" を実行するかを思い出してください。 " に変換します。正しく見えるまでクリックし、答えを読み取ります。 "
tl;dr: Flexboxは1 次元のレイアウトモデルです コンテナは6 つのプロパティを通してそれを駆動します:
flex-direction、flex-wrap、justify-content、align-items、align-content、そしてgap。.このジェネレータは、それらのすべてを公開し、ライブプレビューを表示し、クリーンなCSSを放出します。プレビューは、出力したのと同じ宣言でレンダリングされるため、表示されるものは、まさにあなたが貼り付けたものと同じです。サインアップなしで完全にブラウザで実行されます。
フレックスボックスジェネレーターはどのような問題を解決しますか?
Flexbox は相対的であるからこそ強力です。 intent を記述し (" これらの項目をそれらの間に等しいスペースで広げ、" " これを両方の軸の中心に置き、quot;)、ブラウザがピクセルを計算します。しかし、各プロパティの効果は他のプロパティの状態に依存するため、相対システムを頭の中に保持するのは困難です。 align-content アイテムがラップするまで何もしない 方向転換すると主軸と交差軸が入れ替わる。 space-between あんど space-around 並べて比較するまでは似ているように見えます.
相対システムの直感を構築する最速の方法は、それを操作して監視することです。ジェネレーターは、編集-保存-更新ループを単一のインタラクションに折りたたみます。ドロップダウンを変更し、ボックスの移動を確認します。ライブプレビューで10分後、クロス軸を制御するプロパティは、記憶する事実ではなくなり、感じるものになります。そして、探索が終わったら、書き写すための精神的なメモが残されません。作業中の CSS はすでにあなたのために書かれています。
コンテナはどのプロパティを制御しますか?
Flexbox はコンテナとそのアイテムの間で責任を分割します。コンテナが全体的な配置を決定します。ほとんどのレイアウト決定が行われる場所であるため、ジェネレーターが焦点を当てる場所です。各コンテナ プロパティが行うことは次のとおりです。
| 財産 | 制御するもの | 共通の価値観 |
|---|---|---|
flex-direction |
主軸とその方向 | row、 column、 row-reverse、 column-reverse |
flex-wrap |
アイテムが新しい行にオーバーフローするかどうか | nowrap、 wrap、 wrap-reverse |
justify-content |
主軸に沿った間隔 | flex-start、 center、 space-between、 space-evenly |
align-items |
交差軸上の位置決め | stretch、 center、 flex-start、 baseline |
align-content |
交差軸上の折り返された線の間隔 | stretch、 center、 space-between |
gap |
項目間のスペース | たとえば、任意の長さ 16px |
このスティックを作るメンタルモデルは仕様からの2 軸のアイデアです. 主軸に沿ってアイテムが流れます, これは flex-direction セットします。 cross 軸は常にそれに垂直です。 justify-content 主軸上に空間を分散する; align-items 十字軸上の位置です 一度 flex-direction です column、主軸が垂直なので、 justify-content アイテムを上から下に積み重ねるようになりました align-items それらを左から右に配置します。プロパティについては何も変更されません。軸はその下で回転しました。
flexbox で div を中央に配置するにはどうすればよいですか?
これはflexboxの質問で 最も検索された1つで 答えは3行です コンテナを に設定します display: flex、 その後 justify-content: center あんど align-items: center。これにより、子供は主軸と交差軸に同時に集中します。デフォルトの行の場合、これは水平方向と垂直方向の死んだ中心を意味します。
発電機では、あなたが選択します center 位置合わせコントロールとサンプルボックスの両方について、プレビューエリアの中央にジャンプします。 すると、出力ボックスに以下が表示されます:
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
このレシピが暗記するのではなくクリックして構築する価値がある理由は、要件が少しでも変更された瞬間、たとえばアイテムを上部に固定して水平方向に中心に置く必要があるとき、ドロップダウンを 1 つ変更して、どちらかを推測する代わりに結果を確認するためです。 2 つのプロパティを編集します。
アラインコンテンツはいつ重要ですか?
align-content は、プロパティの人が設定され、その後、何も起こらない理由不思議 答えは仕様にある: それは、フレックスアイテムの複数の行がある場合にのみレイアウトに影響を与えると、 flex-wrap: nowrap、すべてのアイテムは単一の行の上に座っているので、配布する行のセットはなく、プロパティは不活性です。
ジェネレーターはこのルールをエンコードするため、誤解されることはありません。 wrap がオフの場合、 align-content 制御が無効になり、生成された CSS からプロパティが完全に省略されます。 wrapping をオンにするとアクティブになり、ラップされたアイテムの行を一緒に押したり、交差軸上に広げたりするのを見ることができます。 property を何かを行う場合にのみプロパティを放出すると、出力が正直になります。コピーされたルールのすべての宣言は、レイアウトに目に見える影響を与えるものです。
Justify-content の値の違いは何ですか?
ザ・ justify-content キーワードは、ライブ プレビューが維持される場所です。違いは空間的であり、散文で説明するのが難しいためです。 flex-start 主軸の開始位置にアイテムをパックします。 center 真ん中に詰めます. space-between 最初と最後の項目をエッジに押し、残りのスペースを他の項目に均等に分配するため、外側のエッジにはスペースがありません。 space-around 各アイテムの両側に同じ量のスペースが与えられます。これは、2 つのアイテム間のギャップがエッジのギャップの 2 倍であることを意味します。 space-evenly エッジを含むすべてのギャップを等しくします。
その段落を読むと、ほとんど何も教えてくれません 画面上の5 つのボックスで5 つの値をクリックすると、数秒で教えてくれ、決して混乱することはありません space-between と space-around エッジの動作を並べて確認したら、もう一度説明します。これは、記憶ではなく操作によってレイアウトを構築するための議論であり、一連のビジュアル CSS ツールを閉じておく背後にあるのと同じ議論です グラディエントジェネレータ そして、 box-shadow generator 同じ理由で存在します。グラデーションやシャドウも、ブラインドを書くよりも目でダイヤルインする方が簡単だからです。その種のツールキットを組み立てるためのより広範なケースは、このピースにあります Web 開発者ツールキット。
Flexbox か CSS グリッドか?
この疑問は絶えず出てきます 競争であるというフレーミングは間違いです Flexboxは1 次元です 1 つの軸に沿ってアイテムを敷設し 指示されたらラップします ブラウザにネゴシエートさせたいサイズの ものの行に優れています ツールバー ナビゲーションバー ボタングループ カード行は 自然なflexboxジョブです CSS Gridは2 次元です 行と列を一緒に制御し 明示的なトラックが必要な ページレベルの構造に優れています。
実際のプロジェクトでは、それらは常にネストします。 grid はページ領域を定義し、flex コンテナはそれらの領域の 1 つ内にアイテムを配置します。 flexbox を徹底的に学習してもグリッドは冗長になりませんし、その逆も同様です。各ジョブに適合するツールを流暢に実行できます。ジェネレータは、1 次元のケースに対してその流暢さを達成するための高速な方法であり、コンテナのプロパティが二次的な性質になると、フレックス レイアウトを手動で読み書きする際に参照が必要になるのをやめます。
Flexbox Generator を使うには?
フローは、レイアウトについての考え方を反映しています。
- 選ぶ
flex-directionそして、アイテムをラップするかどうか。これにより軸とオーバーフローの動作が設定され、2 つの決定によって他のすべてが決まります。 - アライメントを設定します。調整します
justify-content主軸上とalign-itemsプレビューが頭の中のアレンジメントと一致するまで、十字軸上にあります。 - チューン間隔。 を設定します
gapスライダーのあるアイテムの間、およびラッピングがオンの場合は設定しますalign-contentラインをスペースに入れるため. - CSS をコピーします。生成されたルールは a をターゲットにします
.containerクラスとアップデートはライブで ワンクリックでコピーしてスタイルシートに貼り付けます。
また、プレビュー項目を追加または削除して、異なるコンテンツの下でレイアウトがどのように動作するかをテストすることもできます。 A space-between navbar は 3 つのアイテムで問題なく見えますが、ラップする 7 つのアイテムでは大きく異なります。視聴中にカウントを変更できることは、生産に到達する前にそれをキャッチする方法です。
ギャップは間隔のマージンに置き換わりますか?
大体、そうです、そしてそれは本当の改善です。 前 gap フレックス コンテナでサポートされており、アイテムの間隔をあけるということは、各子供にマージンを追加し、最初または最後の子供で追加のマージンと戦うことを意味し、通常は a を使用します :last-child 親を上書きするか、マイナスのマージンを与えます。 gap 項目間のスペースを直接設定し、折り返された行間にも適用し、外側のエッジには何も追加しないため、エッジマージン バグのクラス全体が消えます。
発電機が処理します gap ピクセルスライダーを備えたファーストクラスのコントロールとして、ギャップがゼロの場合の宣言を省略して出力が最小限にとどまります。生産作業の場合、 gap on flex コンテナは現在のブラウザ全体で十分にサポートされているため、マージン アプローチに手を伸ばす理由はほとんどありません。作業中にユニット間の間隔値を変換する場合は、 CSS ユニットコンバータ を扱う px にする rem 電卓のない算数.
生成されたCSSの限界は?
ジェネレータはコンテナルールを生成します。 のようなアイテムごとのプロパティを設定しません flex-grow、 flex-shrink、または flex-basis、個々の項目がどのように拡張し、スペースを埋めるために収縮するかを制御します。これらは、特定のコンテンツに依存する項目レベルの決定であり、ほとんどのレイアウトでは、コンテナのプロパティ プラス flex: 1 成長すべきアイテムには必要なものがすべてあります。アイテムごとに細かい制御が必要な場合でも、生成されたコンテナ ルールは構築すべき正しい基盤です。
出力には標準の接頭辞なしのプロパティが使用されます。 flexbox のベンダー プレフィックスは、サポートから何年も経っているブラウザーに必要だったので、最新のスタイルシートではそれらを使用すべきではなく、今日追加するのはノイズです。生成された CSS は、書かれているとおりに本番環境に対応しています。つまり、終了する必要がある開始スケッチではなく、貼り付けることができるルールとともに残します。フロントエンドの作業をより高速にする、より幅広い小規模ユーティリティのセットについては、この概要は次のとおりです 開発者の生産性向上ツール は、同様に良い仲間です グラディエントジェネレータガイド ビジュアルCSSがスピードアップしたい部分である場合。
どの共通レイアウトを使って構築できますか?
一握りのレシピは、日々のフレックスボックスのほとんどの作業をカバーしており、それぞれがジェネレーターで数回クリックします。 左側にロゴ、右側にリンクがあるナビゲーションバーです justify-content: space-between と align-items: center 一列に並んで.完璧に中心のヒーロー,古典的な " ページ上のボックスを中心にして, " です. justify-content: center あんど align-items: center. フォーム フィールドの垂直スタックです flex-direction: column と gap 一貫した間隔のために、それはすべてのフィールド上のマージンよりもきれいです 狭い画面上の新しい行にラップするカードの応答列は、を持つ行です flex-wrap: wrap そして gap、 その後 flex: 1 カード自体では、列を埋めるために成長します。
これらをメモリからコピーするのではなく、ジェネレータに構築する価値は、エッジケースがすぐに表示されることです。 A space-between 1 つの項目しかない Navbar はその項目を先頭に固定するため、それが理解できるまではバグのように見えることがあります space-between 単一の項目で配布するものは何もありません。ラッピング カードの行は、2 枚のカードと 6 枚のカードで異なる動作をし、プレビューと #39; s の調整可能な項目数により、出荷前に両方を確認できます。操作によってレイアウトを構築するということは、ユーザーが報告した後ではなく、ツール内にいる間に驚くべきケースが表面化することを意味します。
レシピが指の中に入ると、そのためのジェネレーターを必要とせず、5 行を直接書きます。これが健全な最終状態です。ツールはプロデューサーと同じくらい教師です。クリックして構築するすべてのレイアウトは、次回手で書くときにもう少しよく理解できるものです。これはまさに、優れた視覚的ユーティリティが、手探りのケースに便利さを保ちながら、基本に対して徐々に不要になる方法です。
フェイク
CSSフレックスボックスジェネレータとは何ですか?
CSS flexbox ジェネレーターは、flex コンテナのプロパティを設定し、結果として得られる CSS をコピーできるビジュアル ツールです。 justify-content、align-items、direction、wrap と gap を調整し、ライブ プレビューを表示し、生成されたルールをスタイルシートに貼り付けます。
flexbox で div を中央に配置するにはどうすればよいですか?
コンテナを display: flex に設定し、次に justify-content: center と align-items: center に設定します。これにより、メイン軸とクロス軸の両方にアイテムが集中します。このツールでは、位置合わせコントロールの両方に center を選択し、CSS をコピーします。
Justify-content と align-items の違いは何ですか?
justify-content は、行の場合は水平、列の場合は垂直である主軸に沿ってアイテムを分散します。 align-items は、主軸に対して垂直な交差軸上にアイテムを配置します。 flex-direction スワップを変更すると、それぞれが制御する軸が変わります。
Align-content はいつ影響しますか?
align-content は、アイテムが複数の行にラップされている場合にのみレイアウトに影響します。 flex-wrap を nowrap に設定すると、行が 1 つだけになるため、プロパティは何も実行せず、このツールは出力から省略します。
flexbox の gap プロパティは何をしますか?
gap は、各項目に余白を追加することなく、flex 項目間に一貫したスペースを設定します。これは、同じ行のアイテム間およびラップされた行間に適用され、余白ベースの間隔によって生じるエッジマージンの問題を回避します。
フレックスとインラインフレックスの違いは何ですか?
display: flex は、コンテナを利用可能な幅全体を取り込むブロックレベルのボックスにします。 display: inline-flex は、テキスト フロー内に配置され、コンテンツと同じ幅しかないインラインレベルのボックスにします。一方、両方とも同じフレックス ルールで子供をレイアウトします。
Flexbox は CSS Grid に代わるものですか?
第 Flexbox は、アイテムを 1 つの軸に沿って配置するための 1 次元モデルで、ツールバー、ナビゲーション、カードの行に最適です。 CSS グリッドは、行と列を一緒に配置するための 2 次元であり、補完的であり、同じレイアウトでよく使用されます。
生成されたCSSは、本番環境で使用しても安全ですか?
はい。 Flexbox は最新のすべてのブラウザでサポートされており、ツールは標準の接頭辞なしの CSS プロパティを放射します。すべての処理はブラウザで行われるため、アップロードされるものは何もなく、ツールはロードされるとオフラインで動作します。
