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

Flexible 彈性盒子模型之CSS align-items 屬性

高洛峰
高洛峰原創
2017-02-23 09:58:551921瀏覽


實例

# 中對齊彈性盒的各項e388a4556c0f65e1904146cc1a846bee 元素:

  1. #p

  2. #{

  3. display: flex;

  4. align -items:center;

  5. ##}

  6. <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>手册网(www.shouce.ren)</title>
    <style>
    #main {
        width: 220px;
        height: 300px;
        border: 1px solid black;
        display: -webkit-flex; /* Safari */
        -webkit-align-items: center; /* Safari 7.0+ */
        display: flex;
        align-items: center;
    }
    
    #main div {
       -webkit-flex: 1; /* Safari 6.1+ */
       flex: 1;
    }
    </style>
    </head>
    <body>
    
    <div id="main">
      <div style="background-color:coral;">RED</div>
      <div style="background-color:lightblue;">BLUE</div>
      <div style="background-color:lightgreen;">Green div with more content.</div>
    </div>
    
    <p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 align-items 属性。</p>
    <p><b>注意:</b> Safari 7.0 及更新版本通过 -webkit-align-items 属性支持该属性。</p>
    
    </body>
    </html>
效果預覽


瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器的版本號。

緊接在 -webkit-, -ms- 或 -moz- 後的數字為支援該前綴屬性的第一個版本。

屬性     align-items21.011.020.09.012.1

定義和用法

align-items 屬性定義flex子項在flex容器的目前行的側軸(縱軸)方向上的對齊方式。

提示:使用每個彈性物件元素的 align-self 屬性可重寫 align-items 屬性。

7.0 -webkit-
##否可動畫化:否。請參閱 版本:CSS3#JavaScript 語法:

 


#CSS 語法


align-items: 拉伸|中心|伸縮開始|伸縮結束|基線|初始|繼承;

屬性值

預設值: stretch
#繼承:
CSS3動畫屬性、CSS3動畫實例
object. style.alignItems="center" 效果預覽
效果預覽
描述 測試
stretch #預設值.項目被拉伸以適應容器。
center## #############專案位於容器的中心。 效果預覽
flex-start 專案位於容器的開頭。 效果預覽
flex-end 專案位於容器的結尾。 效果預覽
baseline 專案位於容器的基線上。 效果預覽
initial 設定該屬性為它的預設值。請參閱 initial。 效果預覽
inherit 從父元素繼承該屬性。請參閱 inherit。
#更多Flexible 彈性盒子模型之CSS align-items 屬性相關文章請關注PHP中文網!
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn