フレックスレイアウトの改行スペースでの align-content の使用

フレックスレイアウトの改行スペースでの align-content の使用

1. この記事で実装した効果図は以下のとおりです。レイアウトの右側に Flex レイアウトを使用し、3 つ以上の場合は行を折り返します。

親要素コードは次のとおりです。

.nav-右
  幅: 75%;
  パディング: 10px;
  ディスプレイ: フレックス;
  /* デフォルトは水平です*/
  flex-direction: row;/*子要素の配置方向を設定する*/
  flex-wrap: wrap;/*オーバーフローした場合は折り返す*/
}

サブ要素コードは次のとおりです。

.nav-right-item{
  幅: 33.33%;  
  高さ: 120px;  
  テキスト配置: 中央;
}

しかし、結果は予想通りではなく、行間に空白があります

解決策は、親要素にalign-content:flex-startを追加することです。

.nav-右
  幅: 75%;
  パディング: 10px;
  ディスプレイ: フレックス;
  flex-direction: 行;
  flex-wrap: ラップ;
  align-content: flex-start/*子要素間の空白を削除し、項目をコンテナーの上部に配置します。 */
}

コンテンツの位置揃え

効果:

フリーボックス内の各項目の垂直配置を設定します。

状態:
この属性の設定を有効にするには、親要素にフリーボックス属性 display:flex; を設定し、配置モードを水平配置 flex-direction:row; に設定し、行折り返しを flex-wrap:wrap; に設定する必要があります。
設定対象:

このプロパティはコンテナー内の項目に適用され、親要素に設定されます。
価値:
ストレッチ: デフォルト設定では、コンテナー内の各項目が占めるスペースが引き伸ばされ、各項目の下に空白スペースが追加されてスペースが埋められます。デフォルトでは、最初の項目はコンテナーの上から配置されます。

<!DOCTYPE=html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル>
コンテンツの配置
</タイトル>
<スタイル>
 
#父親{
    
    幅:200px;
    ディスプレイ:フレックス;
    flex-direction:行;
    flex-wrap:ラップ;
    align-content:ストレッチ;
    高さ:200px;
    背景色:グレー;
}
.son1{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:オレンジ;
}
 
.son2{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:赤;
}
 
.son3{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:#08a9b5;
}
 
 
</スタイル>
</head>
<本文>
<div id="父">
    <div class="son1">q</div>
    <div class="son2">わ</div>
    <div class="son3">え</div>
    <div class="son3">え</div>
    <div class="son3">え</div>
</div>
</本文>
</html>

中央: 項目間の空白を削除し、すべての項目を垂直方向に中央揃えします。

<!DOCTYPE=html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル>
ドキュメント要素のテストについて</title>
<スタイル>
 
#父親{
 
    幅:200px;
    ディスプレイ:フレックス;
    flex-direction:行;
    flex-wrap:ラップ;
    コンテンツを中央揃えにします。
    高さ:200px;
    背景色:グレー;
}
.son1{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:オレンジ;
}
 
.son2{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:赤;
}
 
.son3{
    高さ:30px;
    幅:100ピクセル;
    背景色:#08a9b5;
}
 
 
.son4{
    高さ:30px;
    幅:100ピクセル;
    背景色:#9ad1c3;
}
 
.son5{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:rgb(21,123,126);
}
</スタイル>
</head>
<本文>
 
<div id="父">
    <div class="son1">q</div>
    <div class="son2">わ</div>
    <div class="son3">え</div>
    <div class="son4">え</div>
    <div class="son5">え</div>
</div>
 
</本文>
</html> 

flex-start: アイテム間のスペースを削除し、アイテムをコンテナーの上部に配置します。

<!DOCTYPE=html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル>
ドキュメント要素のテストについて</title>
<スタイル>
 
#父親{
    
    幅:200px;
    ディスプレイ:フレックス;
    flex-direction:行;
    flex-wrap:ラップ;
    align-content:flex-start;
    高さ:200px;
    背景色:グレー;
}
.son1{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:オレンジ;
}
 
.son2{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:赤;
}
 
.son3{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:#08a9b5;
}
 
 
.son4{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:#9ad1c3;
}
 
.son5{
    
    高さ:30px;
    幅:100ピクセル;
    背景色:rgb(21,123,126);
}
</スタイル>
</head>
<本文>
 
<div id="父">
    <div class="son1">q</div>
    <div class="son2">わ</div>
    <div class="son3">え</div>
    <div class="son4">え</div>
    <div class="son5">え</div>
</div>
 
</本文>
</html> 

flex-end: アイテム間のスペースを削除し、アイテムをコンテナーの下部に配置します。

align-content:フレックスエンド;

space-between 項目を垂直に揃えます。つまり、上の項目はコンテナーの上部に配置され、下の項目はコンテナーの下部に配置されます。各項目の間に同じ間隔を空けてください。

align-content:スペース間のスペース;

space-around: 各項目の上下に同じ長さのスペースが残り、項目間のスペースが 1 つの項目のスペースの 2 倍になります。

align-content:スペース-around;

inherit: 要素が親要素からこのプロパティを継承するようにします。
innitial: 要素の属性をデフォルトの初期値に設定します。

注: この記事のコードの一部は、CSSのalign-content属性の詳細な説明から引用したものです。

フレックスレイアウトの改行と空白スペースにおける align-content の使い方については以上です。フレックスレイアウトの改行と空白スペースについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL の日付フォーマットと複雑な日付範囲クエリ

>>:  上部の固定divは半透明効果に設定できます

推薦する

nginx proxy_cache キャッシュ設定の詳細な説明

序文:私は仕事柄、オンラインライブストリーミングの分野に携わっており、ビデオの再生やダウンロードには...

mysql5.7のインストールとNavicateの長期無料利用の実施手順

(I) mysql5.7のインストール: ❀詳細:無料のグリーンバージョン5.7のインストール方法は...

Dockerを使用してGitlabを素早くデプロイする方法

1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...

Ubuntu 18.04 での Pycharm インストール チュートリアルの実装

方法1: Pycharmをダウンロードしてインストールするダウンロードアドレス: https://w...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

Tomcat をアンインストールして再インストールする方法 (画像とテキスト付き)

tomcat9をアンインストールする1. Tomcatのインストールはディレクトリに解凍するだけで...

Ubuntu 20.04でAliソースを変更する方法

なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...

MySQLのバージョンアップ方法を超詳しく解説

目次1. はじめに2. データベースをバックアップする3. オリジナルのMysqlをアンインストール...

Nginx 逆生成 Mogilefs 分散ストレージ例の詳細な説明

1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...

ページの下部にHTMLフッターを配置する簡単な方法

要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...

Dockerでコンテナを作成するときのディレクトリ権限

昨日プロジェクトを書いていた時に、MySQL の派生版である Percona を使う必要があったので...

URLパラメータに基づくNginx転送

使用シナリオ:ジャンプ パスは、傍受された URL に応じて動的に構成する必要があります。これは、イ...

Vue での this.$set の動的データバインディングのケーススタディ

インターネット上の this.$set の説明はわかりにくいと感じます。単一データ、オブジェクト、配...

kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...