摘要:彈性盒子基礎彈性盒子是中盒子模型的彈性布局,在傳統(tǒng)的布局方式上增加了很多靈活性。定義一個彈性盒子在父盒子上定義屬性內(nèi)核瀏覽器的兼容設置,下同當然還有行內(nèi)布局的彈性盒子注意,設為布局以后,子元素的和屬性將失效。
彈性盒子基礎
彈性盒子(Flexible Box)是css3中盒子模型的彈性布局,在傳統(tǒng)的布局方式上增加了很多靈活性。
定義一個彈性盒子在父盒子上定義display屬性:
#box{ display: -webkit-flex; //webkit內(nèi)核瀏覽器的兼容設置,下同 display: flex; }
當然還有行內(nèi)布局的彈性盒子
#box{ display: -webkit-inline-flex; display: inline-flex; }
注意,設為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。
彈性盒子兼容情況Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)
彈性盒子概念彈性盒子兩個軸如圖:
主軸(橫軸, main axis)
交叉軸(縱軸, cross axis)
彈性盒子屬性在研究具體屬性前,先建立一個基本模板,必要時修改一下部分參數(shù):
#flex-box{ width: 200px; height: 200px; border: 1px solid #06f; display: flex; display: -webkit-flex; } .flex-item{ height: 30px; width: 30px; color: #f00; font-size: 20px; line-height: 30px; text-align: center; background-color: #8f0; border: 1px solid #f00; }12345
flex-direction
排列方向設置
#flex-box{ flex-direction: row | row-reverse | column | column-reverse; /* @value row 從左到右(默認)*/ /* @value row-reverse 從右到左*/ /* @value column 從上到下*/ /* @value column-reverse 從下到上*/ }
flex-wrap
換行設置
.box{ flex-wrap: nowrap | wrap | wrap-reverse; /* @value nowrap 不換行(默認)*/ /* @value wrap 換行*/ /* @value wrap-reverse 換行 層倒序*/ }
flex-flow
flex-direction和flex-wrap的縮寫屬性
.box { flex-flow:|| ; }
justify-content
水平方向上對齊
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } /* value flex-start 左對齊(默認)*/ /* value flex-end:右對齊*/ /* value center: 居中*/ /* value space-between:兩端對齊,項目之間的間隔都相等*/ /* value space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍*/
align-items
垂直方向上對齊
.box { align-items: flex-start | flex-end | center | baseline | stretch; } /* value flex-start 交叉軸的起點對齊*/ /* value flex-end 交叉軸的終點對齊*/ /* value center 交叉軸的中點對齊*/ /* value baseline 項目的第一行文字的基線對齊*/ /* value stretch 如果項目未設置高度或設為auto,將占滿整個容器的高度(默認)*/
align-content
多根軸線的對齊方式
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } /* value flex-start 與交叉軸的起點對齊*/ /* value flex-end 與交叉軸的終點對齊*/ /* value center 與交叉軸的中點對齊*/ /* value space-between 與交叉軸兩端對齊,軸線之間的間隔平均分布*/ /* value space-around 每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍*/ /* value stretch 軸線占滿整個交叉軸(默認值)*/子元素屬性
order: 屬性定義項目的排列順序。數(shù)值越小,排列越靠前,默認為0
flex-grow: 屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大
flex-shrink: 屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。
flex-basis: 屬性定義了在分配多余空間之前,項目占據(jù)的主軸空間它的默認值為auto,即項目的本來大小。
flex: 屬性是flex-grow, flex-shrink和flex-basis的簡寫。
align-self: 屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
多列column-count 規(guī)定元素應該被分隔的列數(shù)
column-fill 規(guī)定如何填充列
column-gap 規(guī)定列之間的間隔
column-rule 設置所有column-rule-*屬性的簡寫屬性
column-rule-color 規(guī)定列之間規(guī)則的顏色
column-rule-style 規(guī)定列之間規(guī)則的樣式
column-rule-width 規(guī)定列之間規(guī)則的寬度
column-span 規(guī)定元素應該橫跨的列數(shù)
column-width 規(guī)定列的寬度
columns 規(guī)定設置column-width和column-count的簡寫屬性
實例 骰子瀑布流圖9 faces Dice
test
固定底欄test 1111111111112222223333444668412
test I am header! I am body!
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113876.html
摘要:其設計初衷并不是完備的網(wǎng)格系統(tǒng)。所以禁止將其作為一個完整的網(wǎng)格系統(tǒng)使用。但貓有四條腿,而人類只有兩條。總而言之,還是很棒的真的很有用。 對大部分的人來說(如果你寫過CSS),F(xiàn)lexbox 可以說是完美,但它是否適合所有場景呢? 簡而言之,我會給出幾種可用的場景,需要你重新思考 Flexbox 模型的使用。 順便說一句,本人是 Flexbox 的忠實粉絲,曾寫過一篇 Flexbox 詳...
摘要:必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西,但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片,可以加快頁面的載入時間減小帶寬占用。 CSS3主要內(nèi)容 一、CSS選擇器 ? CSS3選擇器規(guī)范地址: https://www.w3.org/TR/2011/RE...? ...
摘要:了解標簽在各瀏覽器當中的默認樣式,可以讓我們了解,為什么會要寫,當中要怎么寫樣式最合理。 了解HTML標簽在各瀏覽器當中的默認樣式,可以讓我們了解,為什么會要寫Reset.css,Reset.css當中要怎么寫樣式最合理。試著思考下面的問題: 為什么會有默認樣式? 每個瀏覽器的默認樣式有什么不同? Reset.css具體怎么寫,每個瀏覽器展示的效果才會一致? 默認樣式 這里說的默認...
閱讀 3162·2023-04-25 17:19
閱讀 616·2021-11-23 09:51
閱讀 1339·2021-11-08 13:19
閱讀 776·2021-09-29 09:34
閱讀 1673·2021-09-28 09:36
閱讀 1494·2021-09-22 14:59
閱讀 2708·2019-08-29 16:38
閱讀 2053·2019-08-26 13:40