css3中的flex的用法詳解

flex是css3中乙個非常重要的屬性，在布局中使用flex起到很重要的作用。例如：

1.我們想讓乙個子div居中用乙個flex就完全搞定。

2.就是我們想讓我們的布局 不管是水平布局還是垂直布局 讓子元素 按比例設定寬或者高，起到異想不到作用，很方便。下面就具體介紹一下他有哪些屬性和用法：

1》如果我們想使用flex，首先需要在父容器中設定：

display:flex;--  表示使用flex布局，此時你設定的float屬性等就不起作用了

flex-direction： --表示此時子div的排列方向，總共有兩種水平方向（預設）row；還有豎直方向 

column；

flex-wrap ： -- 表示是否換行顯示nowrap不換行一行顯示，wrap換行顯示。

justify-content 屬性定義了專案在水平方向上的對齊方式。

flex-start | flex-end | center | space-between | space-around;

flex-start | flex-end | center | baseline | stretch;

stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

flex：數字； ---表示此子div佔父div的比例大小，與display：flex；連用。

flex-grow 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。如果某乙個子div大於其他的那麼有剩餘空間時此div將放大

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。如果為0不縮小

3.舉例用法：

3.1、垂直且水平居中

在父容器中設定

display:flex;

justify-content:center;

align-items:center;

子容器設定寬高，就行了

3.2、設定水平的按比例排列：

父布局設定display:flex;

flex-direction:row;

子布局設定比例

flex: 

number
; 這裡每個子div都要設定此屬性，number就是此div佔的比例大小

css3中user select的用法詳解

user select屬性是css3新增的屬性，用於設定使用者是否能夠選中文字。可用於除替換元素外的所有元素，以下是user select的主要用法和注意事項的說明，更多資訊可參考如下css3文件說明。user select none text all element 預設值 text 適用範圍 除...

CSS3的 keyframes用法詳解

css3的 keyframes用法詳解 此屬性與animation屬性是密切相關的，關於animation屬性可以參閱css3的animation屬性用法詳解 一章節。一.基本知識 keyframes翻譯成中文，是 關鍵幀 的意思，如果用過flash應該對這個比較好理解，當然不會flash也沒有任何...

理解CSS3裡的Flex布局用法

flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...