フレックスレイアウトの改行スペースでの 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は半透明効果に設定できます