CSSのalign-contentプロパティを使用するにはどうすればよいですか?-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSSのalign-contentプロパティを使用するにはどうすればよいですか?

藏色散人

May 30, 2019 pm 05:22 PM

css align-content プロパティは、フレキシブルコンテナ内の項目が交差軸上の使用可能なスペースをすべて占有していない場合に、コンテナ内の項目を (垂直方向に) 整列させます。このプロパティが効果をレンダリングするには、コンテナ内に複数行の項目が存在する必要があります。

CSSのalign-contentプロパティを使用するにはどうすればよいですか?

#css align-content 属性の使用方法

#定義と使用法

align-content プロパティは、フレックスコンテナ内の項目が交差軸上の使用可能なスペースをすべて占有していない場合に、フレックスコンテナ内の項目を (垂直方向に) 整列させます。

ヒント: justify-content プロパティを使用して、項目を主軸 (水平方向) に整列させます。

注: このプロパティが効果をレンダリングするには、コンテナ内に複数行の項目が存在する必要があります。

デフォルト: ストレッチ

継承: いいえ

アニメーション化可能: いいえ。

バージョン: CSS3

JavaScript 構文:

object.style.alignContent="center"

ログイン後にコピー

CSS 構文

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

ログイン後にコピー

属性値

# ストレッチデフォルト値。アイテムはコンテナに合わせて引き伸ばされます。

# 中央のアイテムはコンテナの中央に配置されます。

# フレックススタート項目はコンテナーの先頭にあります。

# フレックスエンド項目はコンテナの最後にあります。

# space-beween 項目は、行間に空白があるコンテナ内に配置されます。

# スペースで囲まれた項目は、各行の前後に空白があるコンテナ内に配置されます。

#Initial は、このプロパティをデフォルト値に設定します。

# 継承この属性を親要素から継承します。

例

フレキシブルボックスの

要素の項目を揃える:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
    width: 70px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-content 属性。</p>
<p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-content 属性支持该属性。</p>

</body>
</html>

ログイン後にコピー

効果の出力:

CSSのalign-contentプロパティを使用するにはどうすればよいですか?