CSS3彈性伸縮盒子新版本

阿新 • • 發佈：2019-01-14

CSS3彈性伸縮佈局新版本
1.開啟彈性伸縮佈局
display:flexbox;
2.設定佈局中元素的排列方式和順序
flex-direction
可選的引數
row 水平
column 垂直
row-reverse 水平反向
column-reverse 垂直反向
3.設定無法容納時,自動換行
flex-wrap
可選的引數
nowrap 預設值都在一行或一列顯示
wrap 伸縮專案無法容納時,自動換行
wrap-reverse 伸縮專案無法容納時,自動換行,方向和wrap相反
4.flex-flow
集合了flex-direction 和 flex-wrap 的簡寫方式
5.設定伸縮專案的對齊方式
justify-content
可選的引數
flex-start 伸縮專案以容器的起始點靠齊
flex-end 伸縮專案以容器的結束點靠齊
center 伸縮專案以容器的中心靠齊
space-between 伸縮專案平均分佈(類似於老版本的-xxx-box-pack:justify,而且webkit和moz都是通用的)
space-around 伸縮專案平均分佈,但兩邊留下伸縮專案之間距離一半的空白
6.處理額外空間
align-items
同老版本的-xxx-box-align屬性
可選的參考值
flex-start
flex-end
center
baseline
stretch
7.單獨的清理某個伸縮專案的額外空間
設定在伸縮專案上
align-self
屬性值同 aling-items
8.分配伸縮專案所佔的空間
設定在伸縮專案上
flex
9.設定伸縮專案的位置
設定在伸縮專案上
order

同老版本的-xxx-box-ordinal-group

html:

<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>CSS3彈性伸縮佈局</title>
	<link rel="stylesheet" href="index2.css">
</head>
<body>
	<div>
		<p>“我的夢想是覆蓋半個地球的共同市場，在將來某個時候，貿易開放，邊境開放，我們力所能及的最綠色、最可持續能源為生活在這半個地球的每一個人提供增長的動力和機會，”她說。</p>
		<p>時隔兩個月之後，世界給了他以及在里約賽場上蒙受冤屈的運動員一次正視賽場的機會。是的！你們所承受的冤屈雖然當時不能夠徹查，但是事後一定有一個交代。近日，國際業餘拳擊協會（AIBA）在瑞士洛桑宣佈參加里約奧運會拳擊賽事的全部36名裁判被禁賽，並將組織特別調查委員會對他們在里約奧運會中的爭議表現進行調查。 這張照片當時傳遍了全中國，關心奧運會的國人憤恨不已。正如英國《每日鏡報》稱，AIBA此舉的原因是“裁判們的執法有失水準”。AIBA並沒有透露相關調查的具體細節，比如調查將如何進行，會持續多久。不過AIBA主席吳經國說：“2016年裡約奧運會將成為AIBA的一個分水嶺。”在今夏進行的里約奧運會拳擊比賽中，裁判出現多次爭議判罰。愛爾蘭選手康蘭在56公斤級1/4決賽中失利後痛斥AIBA，並表示自己再也不會參加“骯髒”的業餘拳擊比賽</p>
		<p>筆者回過頭去看呂斌置頂在自己個人微博上的那條熱門微博時，能夠感覺到來自於一個追逐夢想的運動員不因為實力不濟而跪倒在賽場上；也不因為發揮不好而在賽場上對觀眾抱歉致意，我們看到的是一個真正的運動員在面對裁判不公時只能事後憤恨的說一句：“裁判偷走了我的夢想”，只能在賽場上跪下親吻賽場告訴自己不曾不尊重它。是的，這是呂斌的態度！</p>
	</div>
</body>
</html>

@charset "utf-8";
p{
	width:200px;
	background:gray;
	margin:5px;
	padding:5px;
}

div{
	width:100%;
	background:red;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	/* justify-content:space-around; */
	
}

p:nth-child(1){
	flex:1;
	align-self:center;
	order:1;
}
p:nth-child(2){
	
	flex:10;
	order:3;
}

p:nth-child(3){
	flex:1;
	order:2;
}

CSS3彈性伸縮盒子新版本

CSS3彈性伸縮盒子新版本

CSS3 彈性伸縮布局

CSS3彈性伸縮佈局——box佈局與flex佈局

CSS3彈性伸縮佈局

CSS3 彈性盒子(Flex Box)

CSS3中flex伸縮盒子的使用

CSS3彈性盒子Flex

css3彈性盒子display：flex

CSS3 彈性盒子(Flex Box)學習

CSS3彈性盒子佈局

css3彈性盒子居中總結1

css3彈性盒子flex實現三欄佈局

筆試題目 -- css3彈性盒子flex實現三欄佈局

CSS3彈性盒子

深入理解 CSS3 彈性盒布局模型

css3彈性盒display:box和flex的完整好教程

實現IT服務彈性伸縮的利器

CentOS 6.9編譯安裝新版本內核

CSS3彈性盒布局

新版本火狐，Chrome不支持showModalDialog解決辦法

CSS3彈性伸縮盒子新版本

相關推薦