css3 彈性盒模型

2021-07-24 02:58:57 字數 993 閱讀 7561

1.box-flex 定義盒子的彈性空間

子元素的尺寸=盒子的尺寸*子元素的box-flex屬性值 / 所有子元素的box-flex屬性值的和

例題：中間寬度固定，兩側寬度自適應：

.box


div:nth-of-type(1)


.box


div:nth-of-type(2)


.box


div:nth-of-type(3)
中間自適應螢幕，兩側固定寬度：

.box


div:nth-of-type(1)


.box


div:nth-of-type(2)


.box


div:nth-of-type(3)


或者.box


div:nth-of-type(1)


.box


div:nth-of-type(2)


.box


div:nth-of-type(3)
乙個未知寬高的塊元素水平垂直居中：

方法一：

table：


table 


.test 


class="test">


水平垂直居中了吧


兩行文字哦


div>


td>


tr>


table>
方法二：

.test //css3裡面有個比較特殊的屬性是相對自身寬高來計算的。那就是transform:translate();
方法三：

.a
方法四：

彈性盒模型：


.flex


.flex-hc


.flex-vc


.wrap


.test

CSS3彈性盒模型

一.方向和順序 彈性盒子的內容可以以任何方向和順序布局，這使布局更簡單，其功能通過以下幾個屬性實現 1 flex direction 值為row 預設值 row reverse column column reverse，用於控制彈性盒子的內容在主軸上的放置方向。row 與當前的寫模式相同，例如 中...

Css3彈性盒模型

css3引入了新的盒模型 彈性盒模型，該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似，其它語言也使用相同的盒模型，如xaml gladexml。使用該模型，可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...

CSS3 彈性盒模型

flex 是flex grow,flex shrink 和 flex basis的簡寫，預設值為0 1 auto。後兩個屬性可選。wrap reverse 是整體一行在反方向 這裡需要注意 align content 多行的時候才會奏效 stretch 預設值。元素被拉伸以適應容器。如果指定側軸大小...