關於css3的彈性布局

css3引入的彈性布局可以對容器中的條目更方便地排序,對齊和分配空間；彈性布局可以在容器不確定長寬的情況下進行填充,且可以根據視窗的大小來進行自適應.在正常的布局中是區分行內元素和塊級元素,他們的排列方式有所不同,而在彈性布局上是不需要考慮元素的排列順序.

彈性布局是對子元素有影響:

上圖是效果就是用了彈性布局,在這段**中,父級元素中定義的

display:flex;   //定義為彈性布局,對改容器的子級元素有效,而對子級的子級元素沒有效果

justify-content:space-between;   //定義子級元素的對齊方式,其中預設的是flex-start(主軸初始方向上的邊界對齊),fled-end(主軸結束方向的邊界對齊),space-between(兩邊對齊),space-around(每個子元素空白空間一樣,但是第乙個和最後乙個與該行的邊界是其它元素空白空間的一半)
align-items:center;  //交叉軸上的對齊方式

在彈性布局中可以自定義布局的方向,從上而下,從下而上,從左到有右或者從右到左都可以,在父級元素中使用flex-deriction

屬性定義.彈性布局中不分上下左右方向,以主軸和交叉軸來描述方向,預設從左到右為主軸方向,從上到下為交叉軸方向,但是我們

flex-deriction:row;     //預設值,主軸為水平方向,方向從左到右

flex-deriction:row-reverse; //主軸為水平方向,方向從右到左

flex-deriction:column;   //主軸為垂直方向,方向從上而下

flex-deriction:column-reverse;  //主軸為垂直方向,方向從下而上

在彈性布局中常用的還有flex-wrap屬性:

flex-warp:nowrap(不換行)/wrap(換行)/wrap-reverse(換行,但是第一行在下方)

CSS3 彈性布局

掌握傳統布局與css3新增彈性布局方式的實現和應用 彈性布局 彈性伸縮布局 事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。比較新的布局方式 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。彈性布局的主要思想是讓容器有能力來改變專案的...

CSS3彈性布局flex

彈性盒子由彈性容器 flex container 和彈性子元素 flex item 組成。彈性容器通過設定 display 屬性的值為 flex 或 inline flex將其定義為彈性容器。彈性容器內包含了乙個或多個彈性子元素。注意 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素...

CSS3彈性盒布局

使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度，而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...