資訊專欄INFORMATION COLUMN
摘要：注本文章按照菜鳥教程布局語法教程為原型稍加修改以方便自己學習菜鳥教程地址年，提出了一種新的方案布局，可以簡便完整響應式地實現各種頁面布局。
注 : 本文章按照菜鳥教程 Flex布局語法教程為原型稍加修改,以方便自己學習. 菜鳥教程地址:http://www.runoob.com/w3cnote/flex-grammar.html
2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能
Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性.
flex布局 : .box{display:flex;}
行內元素也可以使用flex布局 : .box{display:inline-flex;}
Webkit內核的瀏覽器，必須加上-webkit前綴 : .box{display:-webkit-flex; display:flex;}
注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
Flex容器(flex container) : 采用Flex布局的元素,稱為flex容器.
Flex項目(flex item) : flex容器的所有子元素,自動成為容器成員,即flex項目.
容器的兩根軸線 : 水平的主軸(main axis), 垂直的交叉軸(cross axis).
主軸(main axis) : 開始位置->main start, 結束位置->main end, 項目默認沿主軸排列.
交叉軸(cross axis) :?開始位置->cross start, 結束位置->cross end
容器內的單個項目占據的主軸空間叫做->main size, 交叉軸空間叫做->cross size
flex屬性分為容器屬性和項目屬性.
容器屬性 :?flex-direction, flex-wrap,?flex-flow,?justify-content,?align-items,?align-content
項目屬性 :?order,?flex-grow,?flex-shrink,?flex-basis,?flex,?align-self
flex-direction : 決定主軸的方向(即項目排列方向)
row : 水平方向,從左到右.(默認屬性)
row-reverse : 水平方向,從右到左.
column : 垂直方向,從上到下.
column-reverse : 垂直方向,從下到上.
flex-wrap : 規定一條軸線排不下,如何換行.
nowrap : 不換行(默認屬性)
wrap : 換行,第一行在上邊
wrap-reverse : 換行,第一行在下邊,(只行數排列相反,單行內依舊從左到右排列,每一行都是).
flex-flow : 結合flex-direction和flex-wrap,寫法如下
.box{flex-flow:column wrap-reverse}
justify-content : 定義項目在主軸上的對齊方式
flex-start : 左對齊(默認值),項目以主軸的起點對齊
flex-end : 右對齊,項目以主軸的終點
center : 居中
space-between : 兩端對齊,項目之間間隔相等
space-around :?每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍
align-items : 定義項目在交叉軸的對齊方式(僅單行,多行對齊由align-content定義)
stretch :?如果項目未設置高度或設為auto，將占滿整個容器的高度(默認值)
flex-start : 從上到下,以交叉軸的起點為基線,向終點延伸
flex-end : 從下到上,以交叉軸的終點為基線,向起點延伸
center :?交叉軸的中點對齊,項目的中點放在交叉軸的中點上
baseline : 以一行中每個項目的第一行文字進行對齊.
?
align-content : 定義了容器內有多行項目時沿交叉軸的對齊方式,?如果項目只有一根軸線，該屬性不起作用
stretch : 軸線占滿整個交叉軸(每行都有一條軸線), 默認屬性
flex-start : 以交叉軸的起點對齊
flex-end : 以交叉軸的終點對齊
center : 以交叉軸的中點對齊
space-between :?多行項目在交叉軸上間隔平均分布
space-around : 多行項目在交叉軸上兩側的間隔都相等。所以，項目在交叉軸上的間隔比項目與邊框的間隔大一倍
注 : justify-content, align-items和align-content是容器的屬性,而不是項目的屬性,是設定一個容器內項目以軸線上的某一位置對齊
order : 定義項目的排列順序,數值越小,排列越靠前.默認值為0,寫法如下
.item{order:5}
flex-grow : 定義屬性項目放大比例,默認為1
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍
flex-shrink : 定義項目縮小比例,默認為1
如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小.負值對該屬性無效
flex-basis :?定義了在分配多余空間之前，項目占據的主軸空間（main size）,瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小
它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間
flex : 結合flex-grow, flex-shrink 和 flex-basis的屬性,?默認值為0 1 auto, 推薦優先使用
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex: 1; ==>意思是伸縮比(flex-grow和flex-shrink)為1,剩余空間占比(flex-basis)為1
align-self :?允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性,?默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1025.html
摘要：年，提出了一種新的方案，是的縮寫，意為彈性布局。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。屬性分為兩部分，一部分作用于容器稱容器屬性，另一部分作用于項目稱為項目屬性。表示不縮小，負值無效。后兩個是可選屬性。相關資源布局語法教程 簡言 布局的傳統解決方案是基于盒狀模型，依賴 display + position + float 方式來實現，靈活性較差。2009年，W3C提出了一...
摘要：總之有了基礎，理解彈性布局蠻容易的。語法格式當容器的設置了溢出換行屬性，且當前在交叉軸方向上存在多行的情況下，該屬性才會生效。 本篇文章已授權微信公眾號 dasu_Android（大蘇）獨家發布 聲明 本系列文章內容全部梳理自以下四個來源： 《HTML5權威指南》 《JavaScript權威指南》 MDN web docs Github:smyhvae/web 作為一個前端小白，入門跟...
摘要：默認值如果項目未設置高度或設為，將占滿整個容器的高度。與交叉軸兩端對齊，軸線之間的間隔平均分布。該屬性有兩個快捷值和。默認值為，表示繼承父元素的屬性，如果沒有父元素，則等同于。該屬性可能取個值，除了，其他都與屬性完全一致前幾天看了阮一峰的Flex布局教程，講的很不錯，總結一下,有興趣的可以去看原文http://www.ruanyifeng.com/blog/2015/07/flex-gram...
摘要：布局教程語法篇修改轉載自阮一峰老師的博客網頁布局是的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴屬性屬性屬性。一布局是什么是的縮寫，意為彈性布局，用來為盒狀模型提供最大的靈活性。二基本概念采用布局的元素，稱為容器，簡稱容器。 Flex 布局教程：語法篇（修改轉載自阮一峰老師的博客）網頁布局（layout）是CSS的一個重點應用。布局的傳統解決方案，基于盒狀模型，依賴 displ...
摘要：不完全脫離文檔流浮動后的結果當目標標簽的內部有浮動的子級，目標標簽的兄弟標簽的布局會出現顯示異常在不做清浮動的情況下，父級不會獲取子級的高度。一、文檔流(normal flow) 1.概念 將窗體自上而下分成一行一行，塊級元素從上至下，行內元素在每行中從左至右順序排放元素 本質為normal flow(普通流，常規流)，文檔流就是一個連續具有邏輯上下的頁面整體，也可以片面的說，出現在頁面中的...
閱讀 2270·2019-08-30 15:56
閱讀 3108·2019-08-30 13:48
閱讀 1123·2019-08-30 10:52
閱讀 1490·2019-08-29 17:30
閱讀 417·2019-08-29 13:44
閱讀 3528·2019-08-29 12:53
閱讀 1113·2019-08-29 11:05
閱讀 2667·2019-08-26 13:24
