css_html/css_WEB-ITnoseのalign-content属性の詳細説明-htmlチュートリアル-php.cn

css_html/css_WEB-ITnoseのalign-content属性の詳細説明

WBOY

リリース： 2016-06-24 11:17:06

オリジナル

2003 人が閲覧しました

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 これにより、両端の項目が垂直方向に整列されます。つまり、一番上の項目はコンテナーの上部に揃えられ、一番下の項目はコンテナーの底部に揃えられます。各項目の間には等間隔をあけてください。

align-content:space-between;

Space-around: これにより、各アイテムの上下のスペースが同じ長さに保たれ、アイテム間のスペースが 1 つのアイテムのスペースの 2 倍になります。

align-content:space-around;

Inherit: 要素のこの属性を親要素から継承させます。
initial: 要素のこの属性をデフォルトの初期値にします。