目前位置: 首頁 > HTML5、CSS3、其他 > 010、用 flex 輕鬆搞定布局

010、用 flex 輕鬆搞定布局 超大 稍大 微大

ECSHOP 繁體中文版-響應式模板-虛擬主機::ECSHOP2.7.3繁體中文全支援-原來如此 發表於: 2017-11-12

你是否覺得用 DIV 做布局有點繁瑣的話,那麼就可以考慮用 CSS3 的 flex 樣式來做布局看看,你會發現很簡單,而且彈性很大,遺憾的是有些比較舊的瀏覽器並不支援

各廠牌瀏覽器版本相容表 :

用 flex 輕鬆搞定布局


以 ecshop 的模板為例,要達成如圖的布局只需如下的 CSS
用 flex 輕鬆搞定布局


.header-top {
	display: -webkit-flex; display: flex;
	-webkit-align-items: center;align-items: center;
}
.header-top .member {
	-webkit-flex: 1; flex: 1;
	background: yellow;
}
.header-top .service_box {
	width: auto;
	background: green;
}

背景顏色只是用來觀察寬度的,這是使用 FireFox 瀏覽器的結果,IE 只有 11 才支援,我從不用 IE,自然沒有截圖
用 flex 輕鬆搞定布局


.main {width: 400px;min-height: 200px;background: yellow;	display:flex;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;height: 80px;background: pink;}
		.div3 {	width: 50px;height: 120px;background: #f2f2f2;}

用 flex 輕鬆搞定布局


.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items: center; }
		.div1 {	width: 20%;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;background: #f2f2f2;}

用 flex 輕鬆搞定布局


.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items:stretch;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;height: auto;background: #f2f2f2;}

用 flex 輕鬆搞定布局


.main {width: 400px;min-height: 200px;background: yellow;	display:flex;align-items: flex-end;}
		.div1 {	width: 20%;height: 160px;background: #eee;}
		.div2 {	flex: 1;background: pink;}
		.div3 {	width: 50px;height: auto;background: #f2f2f2;}

用 flex 輕鬆搞定布局


flex 的屬性很多,可以輕易組合出你想要的布局,底下列出 flex 的屬性及值 :


flex-direction : 想要子元素如何排列
    row:預設值,由左到右,從上到下
    row-reverse:與 row 相反
    column:從上到下,再由左到右
    column-reverse:與 column 相反


justify-content : 子元素的水平對齊與均分
    flex-start:預設值,靠左對齊
    flex-end:靠右對齊
    center:水平置中
    space-between:均分子元素間隔
    space-around:均分子元素間隔(含子元素兩側)


align-items : 子元素的垂直對齊與均分(單行)
    flex-start:預設值,靠上對齊
    flex-end:靠下對齊
    center:垂直置中
    stretch:將未指定高度的子元素全部撐開
    baseline:以所有子元素的基線作為對齊標準


align-content : 子元素的垂直對齊與均分(多行)
    flex-start:預設值,靠上對齊
    flex-end:靠下對齊
    center:垂直置中
    space-between:將第一行與最後一行分別對齊最上方與最下方
    space-around:每行平均分配間距
    stretch:子元素全部撐開


 flex-wrap : 子元素是否換行
    nowrap:預設值,單行
    wrap:多行
    wrap-reverse:多行,但子元素行反轉


order : 可以直接指定子元素的排列順序


flex : 可以直接指定比例值來讓未知高度或寬度的子元素自動分配

只有本站虛擬主機會員才能對文章發表問題
如果你是本站虛擬主機會員請先至會員中心首頁綁定主機帳號
其他會員請至留言板提問!