POSTCSS-FlexBoxで複雑なレイアウトを作成する

Feb 5, 2026

操作方法

FlexBoxはCSS肥大を減らすための素晴らしいツールであり、ソース注文や整列のようなものに対処するためにいくつかの砂糖を持っています。しかし、それは列と溝のサイズを作成する数学をするための助けを提供しません。多くの専門家が繰り返し状態を述べています.FlexBoxはいいですが、グリッドシステムではありません。

FlexBoxを使用する必要がありますが、デザインの「地理科学ERA」から引き出したグリッドシステムの背後にある基本概念を捨ててはいけません。

列を何かに比例します
あなたのデザイン全体を通して一貫したguttersを使用してください

私たちはそこにある多くのFlexBoxグリッドシステムのうちの1つを使うことができますが、すべての誠実さで、これらの背後にあるスタイルはほとんどfloatベースのグリッドと同じです。著者は、FlexBoxプロパティを難読化するヘルパークラス（たとえば、クラスなど）とともに、ディスプレイを追加します。 ··垂直方向整列 - 中MID の難読化です 整列品：センター ）。

唯一の違いは、列が「曲がった」です。これは、私が先に言ったその砂糖を得ることを意味します。しかし、これは依然としてグリッドが直面する主な問題を解決していません。グリッドシステムはまだCSSの吸収のトンを出力し、グリッドはまだ退屈です。

25トップクラスのウェブサイトテンプレート

グリッドに関する問題

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — システムの肥満：グリッドだけのブートストラップ生成されたCSSは16,435文字です。

グリッド作成者は通常、任意のデバイスサイズに応じてオフセット、ソースオーダー、整列、サイズ変更できるCSSの巨大なパックを配布します。彼らはいくつかのダメージを軽減するためにgzipに頼っていますが、これはそれをすべて得ません。あなたがそれらの余分な機能を必要としないならば、

現在使用しているフレームワークがGrid Mixinsを使用していると仮定すると、最善の解決策はそれらを学び、あなた自身の列を構成することです。これは少し肥満を生み出しますが、グリッドを画分に制限し、異なるフレームワーク間の多くの機動性を提供しません。

2番目の問題に。デザイナーは、等しいサイズの列の特定の組み合わせに基づいて、すべての決定を行うために精神的にロックされています。その結果、インターネット全体が「モバイル上のスタック」にまとめています。他のものの胸膜の1/12の列の組み合わせ。

Flexboxが導入されました フレックス成長 それは私たちを少し解放します。今度は、伸ばされた要素で残りのスペースを埋めるサイズを設定できますが、GUTTERSはページ全体を通して一貫して並ぶことができますか？コンテンツエリアは、どんな種類の念頭に置いてレイアウトしていますか、それともちょうど翼に戻っていますか？

Dragonを入力してください

これら両方の問題に対する解決策は、POSTCSS-ANTという関数に折り返されます。 POSTCSSプラグインは、WebPack、GULP、または単にコマンドラインなどのさまざまなビルドツールで使用できます。 Antは、数十のマインドブグリングをマスクすると、疑わしい単純なAPIを持つ単純なCSS（またはプリプロセッサ）にシームレスにミックスされます。 calc 式。グリッドにやさしいサイズのプレスラを取り出すための2つのミキシン様パラメータが必要です。

例として、このより明確になる可能性があります。 サイズ（1/2）GET（1） 戻り値 Calc（99.99％* 1/2 - （30px - 30px * 1/2）） 。これを壊しましょう：

サイズ（） サイズのスペースで区切られたリストです。これらはさまざまなサイズの任意の組み合わせであり得る：有効なCSSの長さの形式の固定数（ PX. 、 em 、％）;フラクションまたはフロート番号（残りのものは何でも返す、SANS固定数）;そして オート キーワード（どのサイズが残っているか、SANの画分と固定数字を返す）
摘み取られた リストからグリッドに優しいサイズを取得する1ベースのインデックスです。そう サイズ（1px 2px 3px）GET（2） 戻るでしょう 2px
the calc 式はグリッドフレンドリーなサイズです

2列グリッドの各列の幅を1つの30ピクセルのグリッドで取得します。

グリッド{
  表示：Flex;
  フレックスラップ：ラップ;
}

.half {
  幅：サイズ（1/2）GET（1）; / * Calc（99.99％* 1/2  - （30px  -  30px * 1/2））* /
  マージン右：30px; / *各列の右側に溝を置く* /
}

.half：nth-child（2n + 2）{/ *は2番目の要素から始まり、2S * /でカウントを開始します。
  マージン右：0; / *すべての行から最後の溝を削除します* /

これはすでにデザイヤーにこれらのサイズを使う力を提供していますが、より深くダイビングしましょう。

サイズ（100px 1/2）GET（1） 戻り値 100px 。簡単なだけですが、なぜ私たちはAntを使って帰る必要があるでしょうか 100px ？私たちはそれを2番目に入手します。

サイズ（100px 1/2）GET（2） 戻り値 Calc（（99.99％ - （100px +（30px * 1））* 1/2 - （30px - 30px * 1/2）） 。聖なるがらくた。 Antは固定数の合計サイズを見つけてから戻ってきています 1/2 NTHグリッドに優しい方法で残っているものは何ですか。

これらを使うことができます calc Aでグリッドを作成するための式 100px 列と2つ 1/2 列はそうのようなものです（私は省略するでしょう 。グリッド 木を節約するためのスタイル、しかしあなたのコードにそれらを含めるようにしてください）：

 .fixed-size {
  幅：サイズ（100px 1/2）get（1）; / *返品100px（私はそれが愚かに思えますが、少し長い間私と一緒にくる）* /
  マージン右：30px;
}

.half {
  幅：サイズ（100px 1/2）get（2）; / * Calc（（99.99％ - （100px +（30px * 1）））* 1/2  - （30px  -  30px * 1/2）* /
  マージン右：30px;
}

.Half：NTH  - 子供（3N + 3）{
  マージン右：0;

今、私たちは以前に達成されたサイズをいくつか取得することができますが、それはまだスーパーフレキシブルではなく、多くのサイズを扱うときに多くの書き込みを必要とすることができます。

プリプロセッサループ

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — 最小マークアップ：POSTCSS-ANTを使用した最小限のマークアップ、2列目のNTRID。行の最後の要素に余白がないことに注意してください

プリプロセッサとPOSTCSは必ずしも仲間に入りません - 特にカスタム構文が関与している場合。幸いなことに、アリのAPIはプリプロセッサにやさしいです。 PASTCS-SCSSのようなPOSTCSS-PRYSERを使用することはできますが、このアプローチでは、SASSの機能が不十分な未完成/不完全なPOSTCSSプラグインがたくさん使用されます。私は最高のワークフローが次のことを見つけました。

Node-Sassのような高速プリプロセッサを使用して in.scss に out.css.
監視するためにPOSTCSを使用してください out.css. に final.css.
＆lt; link＆gt; に final.css. あなたのマークアップで

これにより、すべてのPOSTCSSプラグインがあなたの心の欲求をプラグインして最高のプリプロセッサの構文を提供します。

今クールなもののために。プリプロセッサは通常、イテレータを提供しながら指定された回数をループする方法を有する。

 @から3の$ i
  コンテンツ：$ i; //コンテンツを返します：1;コンテンツ：2;コンテンツ：3;

プリプロセッサの知識を持って、あなたは本当に興味深い方法で蟻を使い始めることができます...

 $サイズ：100px 1/2 1/2;
$溝：30px;
$長さ：長さ（$サイズ）;

。カラム{
  マージン右：$溝;

  1から$の長さの@
    ＆amp;：nth-child（＃{$長} n +＃{$ i}）{
      幅：サイズ（$サイズ）Get（$ i）溝（$溝）;
    }
  }

  ＆amp;：nth-child（＃{$長} n +＃{$ length}）{
    マージン右：0;
  }

今度は、私たちの不規則なサイズの列は追加のマークアップなしで新しい行にラップします。このコードを使って先に進んでいっぱいに行きます。サイズ、溝、および新しいサイズを追加してみてください（100px auto 100pxなど）。

これはAntのかなり一般的なパターンですので、バニラCSSでも動作する財産に巻き付けています。

グリッド{
  GRENERS-GRID：サイズ（100px 1/2 1/2）; / *追加のオプションを渡すことができますが、plick（）は不要です。 * /

たくさんのオプション

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — プリプロセッサループ：ANTはプリプロセッサループと組み合わせると、不可能であるレイアウトを作成するために本当にその強さを表示し始めます。

渡す要素のサイズと数を知っているときは、NTHグリッドが素晴らしいですが、時にはコンテナを作成し、そこにいくつかのランダムにサイズの要素をダンプするだけです。このような場合、 否定的余白 グリッドはあなたの最善の賭けです。単に通過する 否定的余白 そのような蟻に：

グリッド{
  マージン：0 -15px;
}

。カラム{
  幅：サイズ（1/3）GET（1）グリッド（ネガティブマージン）;
  マージン：0 15px;

結論

これらの例は、Postcss-Antができるすべてのクールなものでほんの少しの垣間見ることでした。それはいくつかのオプションのパラメータとたくさんの説明的なエラー処理を持っていますが、Antの真の力はあなたです。

単に少しデータを返す単にデータを返すのは、電源を開発者の手に戻すのに最適なツールです。それがPOSTCSS-ANTが行うように設計されたものです。あなたが興味をそそるなら、に向かう corysimmons.github.io/Postcs-ant いくつかの顔の融解のデモと甘いドキュメントのために。

この記事はもともとNet Magazineの第286号に掲載されました、 ここで購入してください。

関連記事：

WebデザインにUXエキスパートが必要な理由
クリスマス2016のための10トップウェブデザインブック
Webパフォーマンスをテストするためのトップツール

POSTCSS-FlexBoxで複雑なレイアウトを作成する

グリッドに関する問題

Dragonを入力してください

プリプロセッサループ

たくさんのオプション

結論

操作方法 - 最も人気のある記事

塗装ブラシをきれいにする方法：決定的ガイド

オオカミを描く方法

デジタルプレンエアー絵画の作成方法

PIXIJSでリップル効果を作成する

クリップスタジオペイントでゾンビを描く方法

伝統的なイギリスの村のシーンを描く方法

3Dプリントゴブリンを彫刻する方法

Reactで簡単な音楽プレーヤーを構築する

カテゴリ