両端揃えレイアウトを実現する CSS 列のサンプルコード

1. 堂々巡り

いろいろ試行錯誤した結果、均等割り付けレイアウトを実現する最も簡単な方法は CSS 列を使用することだということが分かりました。

たとえば、両端の 3 つの列の要素を中央に 30 ピクセルの間隔を置いて配置する場合、CSS コードは次のようになります。

。容器 {
    列数: 3 30px;
}

ピンポーン、終わったよ、ゲームオーバー～

それはとんでもなく単純です。

疑わずに、リアルタイム レンダリングの例を見てみましょう。

<div class="コンテナ">
    <div class="zhang"></div>
    <div class="xin"></div>
    <div class="xu"></div>
</div>

。容器 {
    列数: 3 30px;
}
.コンテナ > div {
    パディング: 50px;
    背景: deepskyblue;
}

リアルタイムレンダリング効果は以下のとおりです

2. 列実装のメリットとデメリット

アドバンテージ

Flex レイアウトや Grid レイアウトでのスペース間の値の配置効果と比較して、CSS 列レイアウトを使用する最大の利点は、必要なコードが少なくなるだけでなく、HTML 要素の元のdisplay計算値が保護されることです。

たとえば、ブラウザのデフォルトでは、 <li>要素にはドットなどの箇条書きや数字のシーケンスが含まれます。

FlexレイアウトやGridレイアウトを使用する場合は、 display:flexまたはdisplay:gridを設定する必要があります。元のdisplay:list-item計算値を変更すると、ドットや数字は消えます。

この利点のために、デモを作成しました。こちらをクリックしてください: リストスタイルのタイプを保持し、両端の列を揃えるデモ

次の図に示すように、 <li>要素の子要素は配置効果を維持し、 <li>要素自体のデフォルトのドット記号も保持されていることがわかります。

これは、Flex レイアウトや Grid レイアウトでは簡単に実現できないことです。

欠点

単一行要素の配置効果に適しています。リスト要素の行数が多い場合、列レイアウトの処理は容易ではありません。まず、リストの流れは垂直方向が優先されます。次に、リストが垂直に分割されるという予期しないシナリオが発生しやすくなります。

3. 結論

実際の開発では、両端のレイアウト効果を実現するために CSS 列を使用することは現実的ではありませんが、それでも多くの制限があります。

唯一適切なシナリオは、表示値を変更せずに両端のレイアウト効果を実現する場合です。このようなシナリオは比較的まれですが、実際の開発プロジェクトや使用シナリオは数千に及ぶため、いつ遭遇するかを保証することは困難です。このとき、 columns:3 30pxなどのいくつかの文字を使用するだけで、絶妙なレイアウト効果を実現できます。素晴らしいと思いませんか。

実際、テクノロジーとはそういうものです。まったく役に立たない、まったく役に立たない API はほとんどありません。それらの API は存在する理由があり、登場には価値がありますが、その使用シナリオは非定型的なシナリオに対処するためのものです。

学んで理解すれば、短期間で成果が表れるわけではないかもしれませんが、プロジェクトの経験が蓄積されていくにつれて、必ず適切な使用シナリオに出会うでしょう。他の人はどうやってそれを実現するか頭を悩ませ、Google で検索し続けるでしょうが、あなたはそのようなニーズを一瞬で実現し、数行のコードを書くことができます。その感覚はあなたを夢中にさせるでしょう。それはどんな感じでしょうか?それは、テクノロジーの世界の支配者であり、数多くのコードを監視し、コードの世界で誰にも負けないという感覚です。本質的には、権力をコントロールし、技術の専門家であるという感覚です。

そのため、CSS 列は両端のレイアウトを実装するために使用される可能性は高いものの、それ自体の価値は低くありません。

さて、この記事は技術的にそれほど難しいものではなく、主にレイアウトのヒントをいくつか共有することを目的としています。

この記事のアドレス: https://www.zhangxinxu.com/wordpress/?p=9429

CSS 列を使用して両端揃えレイアウト効果を実現する方法についての記事はこれで終わりです。CSS 列を使用した両端揃えレイアウトの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。