css flex布局中妙用margin auto

2021-09-11 14:47:06 字數 888 閱讀 5436

在使用flex布局時僅使用align-items和justify-content有時並不能滿足我們的需要，通過margin: auto我們可以實現一些比較有用的布局。

我們先弄乙個小demo， 下面的例子都是基於這個demo做修改

id="container">


class="box box1">1div>


class="box box2">2div>


class="box box3">3div>


class="box box4">4div>


class="box box5">5div>


div>


複製**
#container 


.box 


複製**
.box1 


複製**
在jsfiddle中檢視 

.box5 


複製**
在jsfiddle中檢視

上面的例子並不限於乙個元素

.box2 


複製**
在jsfiddle中檢視 

.box1 


.box5 


複製**
在jsfiddle中檢視 

.box1, .box4 


.box2, .box5 


複製**
在jsfiddle中檢視 

.box5 


複製**
在jsfiddle中檢視

css flex布局實用

張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...

css flex布局基礎

1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...

CSS Flex布局整理

注意相容問題 示例的dom結構 div class box div class item 1 div div class item 2 div div class item 3 div div 基礎樣式設計 box item1 flex direction 用於指定flex主軸的方向，繼而決定 fl...