柔軟なフレキシブルボックスモデルの CSS justify-content プロパティ-CSSチュートリアル-php.cn

柔軟なフレキシブルボックスモデルの CSS justify-content プロパティ

高洛峰

リリース： 2017-02-23 09:51:33

オリジナル

2023 人が閲覧しました

インスタンス

のフレックスボックスオブジェクトの

要素の項目の周囲に空白があります:

p
{
ディスプレイ : flex;
justify-コンテンツ:スペース-周囲 ;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#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:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

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

</body>
</html>

ログイン後にコピー

効果プレビュー

ブラウザのサポート

表内の数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

-webkit-、-ms-、または -moz- の直後の数字は、このプレフィックス属性をサポートする最初のバージョンです。

属性justify-content21.0 -webkit-18.0 -moz-6.1 -ウェブキット -

定義と使用法

justify-contentは、フレックスボックス要素の主軸(横軸)方向の配置を設定または取得するために使用されます。

ヒント: align-content プロパティを使用して、項目を交差軸 (垂直方向) に整列させます。


29.0	11	28.0	9.0	17.0

デフォルト:	flex-start
継承:	いいえ
アニメーション化可能:	いいえ。 CSS3アニメーションのプロパティ、CSS3アニメーションの例を参照してください。
バージョン:	CSS3
JavaScript 構文:	object.style.justifyContent="space-between" 効果のプレビュー

CSS 语法

属性値

値	説明	テスト
flex-start	デフォルト値。項目はコンテナの先頭にあります。	エフェクトプレビュー
flex-end	アイテムはコンテナの最後にあります。	効果プレビュー
center	アイテムはコンテナの中央にあります。	効果プレビュー
space-between	アイテムは、行間に空白があるコンテナ内に配置されます。	効果プレビュー
space-around	アイテムは、各行の前後に空白があるコンテナ内に配置されます。	効果プレビュー
initial	このプロパティをデフォルト値に設定します。イニシャルを参照してください。	効果プレビュー
inherit	この属性を親要素から継承します。「継承」を参照してください。