您的位置：首页 > Web前端 > CSS

CSS学习（二十二）-flexbox模型之三

2016-03-31 00:58 585 查看

一、理论：

1.flex-line-pack 堆栈伸缩行

a.使用与flex-pack 相同

b.增加stretch start/end/center/justify(平均分布)/distribute（两端保留一半的空间）/stretch（拉伸填充整个容器）

c.flex-line针对个体，flex-line-pack针对群体
二、实践：

1.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.flexbox{
margin: 0.25em 5em;
border:1px solid hsla(120,30%,50%,.8);
background-color: hsla(10,80%,10%,.2);
height: 550px;
}
.flexbox:nth-child(2n){
margin-bottom: 200px;
}
.flexbox>div{
border:1px solid hsla(120,30%,50%.8);
font:bold 2em arial;
color:#fff;
width: 150px;
padding: .2em;
}
.flexbox > div:nth-child(odd){
background-color: hsla(120,30%,50%.8);
}
.flexbox > div:nth-child(even){
background-color: hsla(120,30%,10%,.8);
}
.flexbox > div:last-child{
background-color: hsla(20,10%,60%,.8);
}
.flexbox{
display: -ms-flexbox;
-ms-flex-wrap: wrap;
}
.flex-direction-coloumn{
-ms-flex-direction: column;
}
.flex-line-pack-start{
-ms-flex-line-pack:start;
}
</style>
</head>
<body>
<div class="flexbox flex-line-pack-start">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
<div>box7</div>
<div>box8</div>
<div>start</div>
</div>
<div class="flexbox flex-line-pack-start flex-direction-coloumn">
<div>box1</div>
<div>box2</div>
<div>box3</div>
<div>box4</div>
<div>box5</div>
<div>box6</div>
<div>box7</div>
<div>box8</div>
<div>start</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航