css3引入的彈性布局可以對容器中的條目更方便地排序,對齊和分配空間；彈性布局可以在容器不確定長寬的情況下進行填充,且可以根據視窗的大小來進行自適應.在正常的布局中是區分行內元素和塊級元素,他們的排列方式有所不同,而在彈性布局上是不需要考慮元素的排列順序.
彈性布局是對子元素有影響:
上圖是效果就是用了彈性布局,在這段**中,父級元素中定義的
display:flex; //定義為彈性布局,對改容器的子級元素有效,而對子級的子級元素沒有效果justify-content:space-between; //定義子級元素的對齊方式,其中預設的是flex-start(主軸初始方向上的邊界對齊),fled-end(主軸結束方向的邊界對齊),space-between(兩邊對齊),space-around(每個子元素空白空間一樣,但是第乙個和最後乙個與該行的邊界是其它元素空白空間的一半)
align-items:center; //交叉軸上的對齊方式
在彈性布局中可以自定義布局的方向,從上而下,從下而上,從左到有右或者從右到左都可以,在父級元素中使用flex-deriction
屬性定義.彈性布局中不分上下左右方向,以主軸和交叉軸來描述方向,預設從左到右為主軸方向,從上到下為交叉軸方向,但是我們可以自定義主軸和交叉軸,主軸方向和交叉軸方向,通過在父級元素中定義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 示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長的示例文字。示例文字，頁面中比較長...