flex容器属性(一)
一，概念
flexible box ,意為“彈性布局”，用來為盒狀模型提供最大的靈活性。
塊級布局更側重于垂直方向，行內布局更側重于水平方向，于此相對的，彈性盒子布局算法是方向無關的。
塊級flex布局：
.box{display: flex; }
行內元素flex布局：
.box{display: inline-flex; }webkit內核的瀏覽器，必須加上-webkit前綴：
.box{display: -webkit-flex; /* Safari */display: flex; }
注意：設為flex布局以后，子元素的float,clear和vertical-align屬性將失效。
二，基本概念
采用flex布局的元素，簡稱“容器”；
它的所有子元素自動成為容器成員，稱為“項目”。
三，容器的屬性：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
?
3,1 ?flex-direction:
flex-direction屬性決定主軸的方向（即項目的排列方向）。
.box {flex-direction: row | row-reverse | column | column-reverse; }
- row（默認值）：主軸為水平方向，起點在左端。
- row-reverse：主軸為水平方向，起點在右端。
- column：主軸為垂直方向，起點在上沿。
- column-reverse：主軸為垂直方向，起點在下沿.
?
3.2 flex-warp:
默認情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
?
3.3 flex-flow:
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。
3.4 justify-content:
justify-content屬性定義了項目在主軸上的對齊方式。(高度一致，width不同的對其)
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
3.5 align-items:
align-items屬性定義項目在交叉軸上如何對齊。（width一致，高度不一致的對其）
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
3.6 align-content
align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
總結：felx的6個容器屬性可以記憶成：一方向，一換行，一簡寫，三對其。
?
參考網址：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
http://www.cnblogs.com/diligenceday/p/5985903.html
轉載于:https://www.cnblogs.com/wang715100018066/p/6018884.html
總結
以上是生活随笔為你收集整理的flex容器属性(一)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JAVA配置Tomcat
- 下一篇： 关于F5 排错的简单介绍之一