CSS3弹性伸缩盒子新版本

最新推荐文章于 2024-08-16 15:26:29 发布

dianbolan

最新推荐文章于 2024-08-16 15:26:29 发布

阅读量2.6k

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/dianbolan/article/details/52764791

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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;
}