首頁 >web前端 >css教學 >Flexible 彈性盒子模型之CSS justify-content 屬性

Flexible 彈性盒子模型之CSS justify-content 屬性

高洛峰
高洛峰原創
2017-02-23 09:51:332079瀏覽


實例

在彈性盒物件的e388a4556c0f65e1904146cc1a846bee 元素中的各項周圍留有空白:

  1. p

  2. #{

  3. display: flex;

  4. ##justify -content: space#-around;

  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-content29.011.028.09.017.0#

定義和用法

justify-content 用於設定或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

提示:使用 align-content 屬性對齊交叉軸上的各項(垂直)。

21.0 -webkit-
18.0 -moz-
6.1 -webkit-
預設值: flex-start
繼承:
可動畫化: 否。請參閱 CSS3動畫屬性、CSS3動畫實例
版本: CSS3
#JavaScript 語法: object. style.justifyContent="space-between" 效果預覽
#

 


#CSS 文法


#justify-content: flex-start|flex-end|center|space- Between|space- around |初始|繼承;

屬性值

專案位於容器的中心。 項目位於各行之間留有空白的容器內。 項目位於各行之前、之間、之後都留有空白的容器內。
描述 測試
flex-start #預設值.項目位於容器的開頭。 效果預覽
flex-end 專案位於容器的結尾。 效果預覽
center center
效果預覽 space-between
效果預覽 space-around
效果預覽 ############initial##### #############設定該屬性為它的預設值。請參閱 initial。 效果預覽
inherit 從父元素繼承該屬性。請參閱 inherit。

#更多Flexible 彈性盒模型之CSS justify-content 屬性相關文章請關注PHP中文網!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn