css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

justify-content:space-betweenレイアウトを使用する場合、要素の最後の行にjustify-self: start;を使用しても効果がありません。調べたところ、CSS3 flexbox はまだサポートされていないことがわかりました。

では、最後の行を左揃えにするにはどうすればよいでしょうか?

いくつかの既存のソリューション

  • タグ要素を使用して不足している項目を補完する
  • グリッドの使用
  • 擬似クラスの使用

疑似クラスの場合、最後の要素がいっぱいになるとプレースホルダーが存在し、グリッドに互換性の問題が発生し、新しいタグを追加したくなくなります。

固定数の列で各行を左揃えにする

列の数は固定されているため、最後の要素のmargin-right値を計算して、完全な左揃えを確保できます。

各行に要素の列が 3 つしかないと仮定すると、最後の要素が 2 番目の列にある場合にのみmargin-right処理が必要になり (つまり、 li:last-child:nth-child(3n + 2) )、距離は 1 つの要素の幅 + ギャップ幅になります。

要素の幅が$widthであると仮定すると、上記の状況に必要な距離は次のようになります: (100% - 3 * $width) / 2 + $width => (100% - $width) / 2

.list1 li:最後の子:n番目の子(3n + 2) {
  右マージン: calc((100% - $width) / 2);
} 

同様に、1 行 4 列の場合、最後の要素が 2 列目にある場合と、最後の要素が 3 列目にある場合の 2 つのケースを処理する必要があります。

.list2 li:最後の子:n番目の子(4n + 2) {
  右マージン: calc((100% - $width) / 3 * 2);
}
.list2 li:最後の子:n番目の子(4n + 3) {
  右マージン: calc((100% - $width) / 3 * 1);
} 

デモコードを見るにはここをクリックしてください

列数が固定されていない各行の左揃え

最善の解決策はグリッドを使用することだと思います。インターネット上にはグリッドがたくさんあるので、ここでは説明しません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト

>>:  HTML 選択タグにリンクを追加する 3 つの方法

推薦する

WEBAPP開発スキルのまとめ(モバイルWebサイト開発の注意点)

1. レスポンシブな Web を開発するには、ページを画面サイズに適応させる必要があります。前の記...

Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...

フォーム入力ボックスに関するWebデザインのヒント

1. キャンセル ボタンが押されたときの破線ボックス<br /> 入力に属性値 hide...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

Nginx Rewrite の使用シナリオと設定方法の分析

Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....

Linux でディスクをマウントし、起動時に自動的にマウントするように設定する方法

皆さんの時間は貴重だと承知しているので、プロセス コマンドを直接書き留めておきます。設定できます。原...

IE6 での背景画像キャッシュ

IE6 での CSS 背景画像のちらつきバグ (IE6 の背景画像キャッシュの問題) IE6 は、背...

MySQL 5.x の文字化け問題の解決方法

MySQL はよく使われるオープンソースのデータベース ソフトウェアですが、初めてのユーザーにはあま...

Vueは水平の斜めの棒グラフを実装します

この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

React のネストされたコンポーネントの構築順序

目次Reactの公式サイトではライフサイクルの説明を見ることができます次に、ネストされたコンポーネン...

Linux における効果的なユーザー グループと初期ユーザー グループの実装

まず、/etc/group ファイルを確認します。 [root@localhost /]# cat ...

CSS3 の新しいレイアウト: flex の詳細な説明

Flexの基本概念フレックス レイアウト (フレックスはフレキシブル ボックスの略)、エラスティック...