box{
display: flex;
任何乙個容器都可以指定為flex布局。
注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
.box{
display: inline-flex;
行內元素也可以使用flex布局。
.box{
display: -webkit-flex; /* safari */
display: flex;
webkit核心的瀏覽器
容器的屬性
元素的屬性
flex-direction
設定內部元素的在主軸上的排列方向
預設值 1). row 將元素水平排列(預設不換行)，除非設定flex-wrap
一般值: 2）、row-reverse、3）、column
其它值:
order
flex-wrap
預設值:nowrap, 不換行設, 置水平換行方式
flex-grow
預設為0，即 即使存在剩餘空間，也不會放大；
如果容器有剩餘空間，控制元素放大搶占的比例，會根據水平或垂直方向搶占
理解參考
flex-flow
聯合屬性, 是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
flex-shrink
空間不足時,產生效果. 預設為1，子元素寬度之和超出父元素寬度, 用於設定每個元素縮小的比率
flex-shrink：0 表示當前元素不縮小.
換句話說: 如果乙個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。
justify-content
對齊設定屬性
容器內元素水平對齊方式即主軸上元素的對齊方式，和
flex-start | flex-end | center | space-between | space-around;
flex-start 右對齊: 起始點對齊,預設左對齊
space-between 兩端對齊
space-around 空間均勻分配,兩端有間距
flex-basis
預設值：auto
number: 乙個長度單位或者乙個百分比，規定靈活專案的初始長度。如:px %
專案佔據的主軸空間（main size）。
align-items
對齊設定屬性,對容器進行設定，使內部元素垂直對齊方式
flex-direction: row; //預設，不寫也一樣
align-items: center; //垂直居中設定
flex
聯合屬性：flex-grow、flex-shrink、flex-basis三個屬性的縮寫
預設值是 0 1 auto //有空餘空間,元素不會放大, 超出父元素縮小.
flex:1 = 1 1 0%
align-content
相當於多行內容的水平對齊方式,繼承justify-content,注意:如果容器內只有1行,此屬性不起作用
align-self
display 3個常用的的屬性
屬性名
屬性值
display
none
block
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（乙個塊級元素獨佔一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定乙個寬度。
inline
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設定；
3、元素的寬度就是它包含的文字或的寬度，不可改變。
inline-block
內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點。
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
CSS屬性速查表
本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案 布局類1 定位 position z index topbottom left right2 浮動 float clear3 多列布局 columns col...
CSS屬性速查表
本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案 1 定位 position z index topbottom left right 2 浮動 float clear 3 多列布局 columns colu...
CSS的常用屬性速查表 轉）
要想寫出優美的css作品，想象力固然很重要，然而基礎也是不可忽略的。相信大部分人怕寫css的原因是被它龐大的基礎知識體系給嚇到了，在此筆者推薦乙個叫freecodecamp的 通過闖關的方式來學習前端三劍客，用它入門css是最佳的選擇！以下列出的屬性知識點都是筆者用到過的 千萬不要被數量嚇到，其實常...