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 つの方法

推薦する

ova ファイルを VMware にインポートする際の落とし穴の概要

問題の原因ご存知のとおり、すべてのネットワーク動作は対応するネットワークトラフィックを生成し、すべて...

Vue+tsx のスロット使用の問題が置き換えられない

目次序文問題を見つける解決する追記序文最近、 UIコンポーネントを作成する予定で、 vue 2.xと...

HTML テーブル マークアップ チュートリアル (29): セルのライト境界線の色属性 BORDERCOLORLIGHT

セルでは、明るい境界線の色を個別に定義できます。 > 基本構文<TD ボーダーカラーライ...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

JS ES6コーディング標準の詳細な説明

目次1. ブロックスコープ1.1. let は var を置き換える1.2. グローバル定数とスレッ...

SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

Docker は、あらゆるアプリケーション用の軽量でポータブルな自己完結型コンテナーを簡単に作成で...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

TypeScript マッピング型の詳細

目次1. マップされた型2. マッピング修飾子3. キーの再マッピング4. さらなる探究序文: Ty...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

JavaScript のモジュール性の説明

目次序文: 1. コンセプト2. モジュール化の利点3. 複数のスクリプトタグを導入した後の問題1....

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明

なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...

よく使われる3つのMySQLデータ型

MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...

ウェブページのアクセス速度に関する主な問題と解決策

<br />ウェブサイトのアクセス速度はウェブサイトのトラフィックに直接影響を及ぼし、ウ...

フォーム検証機能を実装するためのネイティブ js

目次開発の際には、機能を段階的に分析して実装することで、明確な考え方を保つことができます。 1. フ...