自適應布局webkit box的用法

flexible box model(靈活盒子模型)

在平常的web橫排布局中，會經常用到float或display:inline-block，但是在多種不同寬度的移動裝置的自適應布局中用的話，還得設定百分比寬度和考慮清除浮動。而flexible box model可以自動計算寬度和自適應，更加方便。 flexible box model有幾個屬性：

1、box-orient在父元素上設定   子元素排列 vertical (垂直) or horizontal（水平）

2、box-flex在子元素上設定   兄弟元素之間比例，僅作乙個係數

3、box-align在父元素上設定    box 排列

4、box-direction在父元素上設定    box 方向  可設定reverse排序相反

5、box-flex-group在子元素上設定   以組為單位的流體係數

6、box-ordinal-group以組為單位的子元素排列方向

7、box-pack在父元素上設定   可設定center和vertically

演示效果如圖：

下面是效果圖的html結構：

<

div 
class
="main"
>
<
div 
class
="div left"
> 自適應布局webkit-box 
div>
<
div 
class
="div center"
> 自適應布局webkit-box 
div>
<
div 
class
="div right"
> 自適應布局webkit-box 
div>
div>

*/*

不建議新增，這裡為了方便測試
*/.main.div.left.right.center

自適應布局

請你說一說你知道的所有web布局方式？1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...

右邊自適應 左右布局 css左右自適應布局

如果有這麼乙個表單需求，前面是乙個名稱，中間是乙個表單，右側是乙個按鈕或者乙個字串。需要自適應布局，名稱為固定長度，右側也是固定，中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先，我想到的有這麼幾種display，乙個是inline block。於是css就變成這樣1.name...