CSSのalign-contentプロパティの使い方-CSSチュートリアル-php.cn

CSSのalign-contentプロパティの使い方

青灯夜游

リリース： 2019-05-25 11:28:43

オリジナル

4031 人が閲覧しました

align-content 属性は、フリーボックス内のアイテムの垂直方向の配置を設定するために使用されます。

CSSの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プロパティの使い方