css3弹性伸缩盒子
CSS3弹性伸缩布局这个貌似要加前缀才能使用1.如何将一个元素设置为弹性盒子display:-xxx-box;2.设置容器内伸缩元素的排列方式-xxx-box-orient可选的值vertical(垂直)horizontal(水平)inline-axis(和水平貌似没区别)block-axis(和垂直貌似没区别)3.设置容器内伸缩元素的排列顺序-xx
·
CSS3弹性伸缩布局
这个貌似要加前缀才能使用
1.如何将一个元素设置为弹性盒子display:-xxx-box;
2.设置容器内伸缩元素的排列方式
-xxx-box-orient
可选的值
vertical(垂直)
horizontal(水平)
inline-axis(和水平貌似没区别)
block-axis(和垂直貌似没区别)
3.设置容器内伸缩元素的排列顺序
-xxx-box-direction
normal(正常顺序从左到右依次排列)
reverse (逆序排列)
4.设置容器内伸缩元素的分布位置
-xxx-box-pack
start(容器的开头处)
end(容器的结尾处)
center(容器的中央)
justify(在容器内平均分布,只在webkit下有效,moz无效)
5.设置弹性容器的额外空间
-xxx-box-align
start (伸缩元素以顶部为基准清理下部额外空间)
end (伸缩元素以底部为基准清理上部额外空间)
center (伸缩元素以中部为基准平均清理上下部额外空间)
baseline (伸缩元素以基线为基准清理额外空间)
stretch (伸缩元素填充整个容器,默认)
6.设置伸缩项目所占容器的比例
-xxx-box-flex
7.设置伸缩项目在容器中的位置
-xxx-box-ordinal-group
html:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>CSS3弹性伸缩布局</title>
<link rel="stylesheet" href="index.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:-moz-box;
-moz-box-pack:center;
-moz-box-align:end;
-moz-box-orient:horizontal;
}
p:nth-child(1){
-moz-box-flex:1;
-moz-box-ordinal-group:2;
}
p:nth-child(2){
-moz-box-flex:10;
-moz-box-ordinal-group:3;
}
p:nth-child(3){
-moz-box-flex:1;
-moz-box-ordinal-group:1;
}
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)