ホームページ > 記事 > ウェブフロントエンド > CSSのalign-contentプロパティの使い方
CSSのalign-contentプロパティの使い方
- 青灯夜游オリジナル
- 2019-02-15 15:17:304016ブラウズ
align-content 属性は、フリー ボックス内のアイテムの垂直方向の配置を設定するために使用されます。
#CSS align-content プロパティ
関数: align-content プロパティこれは、フリー ボックス内の項目の垂直方向の配置を設定するために使用され、flex-wrap 属性の動作を変更します。
使用条件:
フリーボックス属性 display:flex が親要素に設定され、配置モードが水平配置 flex-direction に設定されている必要があります。 row; その後、行の折り返しが設定され、 flex-wrap:wrap; このプロパティの設定が有効になります。説明: align-content 属性はコンテナ内の項目に作用し、親要素を設定します。効果をレンダリングするにはコンテナ内に複数の項目行が必要です。
構文:
align-content: stretch|center|flex-start|flex-end|space-between|space-around;
値の説明:
stretch: デフォルト値。要素はコンテナに合わせて引き伸ばされます。各項目の下に空白を追加することで、コンテナ内の各項目が占めるスペースを拡張します。 center: 要素間のスペースをキャンセルし、要素がコンテナーの中央に来るようにすべてのアイテムを垂直方向に中央揃えします。 flex-start: 要素間のスペースを削除し、要素がコンテナの先頭に来るようにアイテムをコンテナの上に配置します。 flex-end: 項目間のスペースを削除し、要素がコンテナの最後に来るように項目をコンテナの下部に配置します。 space-between: 項目を両端で垂直方向に揃えます。つまり、一番上の項目はコンテナーの上部に揃えられ、一番下の項目はコンテナーの底部に揃えられます。各項目の間には等間隔をあけてください。 space-around: 各アイテムの上下に同じ長さのスペースを残し、アイテム間のスペースが 1 つのアイテムのスペースの 2 倍になるようにします。CSS align-content プロパティの使用例
<!DOCTYPE html>
<html>
<head>
<style>
#main1,#main2,#main3,#main4,#main5,#main6{
width: 70px;
height: 250px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin:10px;
float:left;
}
div *{
width: 70px;
height: 70px;
}
#main1 {
-webkit-align-content: stretch;
align-content: stretch;
}
#main2 {
-webkit-align-content: center;
align-content: center;
}
#main3 {
-webkit-align-content: flex-start;
align-content: flex-start;
}
#main4 {
-webkit-align-content: flex-end;
align-content: flex-end;
}
#main5 {
-webkit-align-content: space-between;
align-content: space-between;
}
#main6 {
-webkit-align-content: space-around;
align-content: space-around;
}
</style>
</head>
<body>
<h1>align-content属性</h1>
<div id="main1">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main2">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main3">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main4">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main5">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
<div id="main6">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>
</body>
</html>レンダリング: 
以上がCSSのalign-contentプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。