検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >柔軟なフレキシブル ボックス モデルの CSS justify-content プロパティ

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

高洛峰
高洛峰オリジナル
2017-02-23 09:51:332077ブラウズ


インスタンス

のフレックスボックスオブジェクトのe388a4556c0f65e1904146cc1a846bee要素の項目の周囲に空白があります:

  1. p

  2. {

  3. ディスプレイ : flex;

  4. justify-コンテンツ:スペース-周囲 ;

  5. }

    6. <!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 语法


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

属性値

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

FlexibleフレキシブルボックスモデルのCSS justify-content属性に関連するその他の記事については、PHP中国語Webサイトに注目してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フレキシブルフレキシブルボックスモデルのCSS順序属性次の記事：フレキシブルフレキシブルボックスモデルのCSS順序属性

関連記事

続きを見る