ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnoseのalign-content属性の詳細説明
css_html/css_WEB-ITnoseのalign-content属性の詳細説明
- WBOYオリジナル
- 2016-06-24 11:17:061932ブラウズ
align-content
機能:
フリーボックス内の各アイテムの縦方向の配置を設定します。
条件: 親要素にフリーボックス属性display:flex;を設定し、配置モードを水平配置に設定し、行の折り返し、flex-wrap:wrap;を設定する必要があります。この属性の設定が開始されます。
オブジェクトの設定:
値: stretch: デフォルト設定では、コンテナー内の各アイテムが占めるスペースを拡張し、充填方法は各アイテムの下に空白スペースを追加することです。デフォルトでは、最初の項目がコンテナの上から配置されます。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>Align-content</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:strech; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}</style></head><body><div id="father"><div class="son1">q</div><div class="son2">w</div><div class="son3">e</div><div class="son3">e</div><div class="son3">e</div></div></body></html>
Center: これにより、項目間の空白が削除され、すべての項目が垂直方向の中央に配置されます。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>关于文档元素测试</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}.son4{ height:30px; width:100px; background-color:#9ad1c3;}.son5{ height:30px; width:100px; background-color:rgb(21,123,126);}</style></head><body><div id="father"><div class="son1">q</div><div class="son2">w</div><div class="son3">e</div><div class="son4">e</div><div class="son5">e</div></div></body></html>
フレックススタート: これにより、アイテム間のスペースが削除され、アイテムがコンテナーの上に配置されます。
<!DOCTYPE=html><html lang="zh-cn"><head><meta charset="UTF-8"><title>关于文档元素测试</title><style>#father{ width:200px; display:flex; flex-direction:row; flex-wrap:wrap; align-content:flex-start; height:200px; background-color:grey;}.son1{ height:30px; width:100px; background-color:orange;}.son2{ height:30px; width:100px; background-color:red;}.son3{ height:30px; width:100px; background-color:#08a9b5;}.son4{ height:30px; width:100px; background-color:#9ad1c3;}.son5{ height:30px; width:100px; background-color:rgb(21,123,126);}</style></head><body><div id="father"><div class="son1">q</div><div class="son2">w</div><div class="son3">e</div><div class="son4">e</div><div class="son5">e</div></div></body></html>
flex-end: これにより、アイテム間のスペースが削除され、アイテムがコンテナーの底に配置されます。
align-content:flex-end;
space-between これにより、両端の項目が垂直方向に整列されます。つまり、一番上の項目はコンテナーの上部に揃えられ、一番下の項目はコンテナーの底部に揃えられます。各項目の間には等間隔をあけてください。
Space-around: これにより、各アイテムの上下のスペースが同じ長さに保たれ、アイテム間のスペースが 1 つのアイテムのスペースの 2 倍になります。
Inherit: 要素のこの属性を親要素から継承させます。
initial: 要素のこの属性をデフォルトの初期値にします。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。