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

css3弹性盒及其属性和视口的介绍

2017-08-16 19:56 471 查看

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--设置视口-移动端必须写-->
<!--宽度设置为设备宽度，缩放比例设为1，用户不可手动改变页面大小-->
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="style.css">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<div class="item item1">001</div>
<div class="item">002</div>
<div class="item">003</div>
<div class="item">004</div>
<div class="item">005</div>
<div class="item">006</div>
<div class="item">007</div>
<div class="item">008</div>

</div>

</body>
</html>

css代码：

*{
margin: 0;
padding: 0;
}
html{
font-size: 16px;
}

.container{
/*设置成弹性布局*/
display: flex;
/*弹性布局的四种方式，行、列、反转行、反转列*/
/*flex-direction:row-reverse ;*/
/*弹性布局的溢出处理 会自适应宽高*/
/*flex-wrap: wrap-reverse;*/
width: 80%;
height: 800px;
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
/*弹性盒的复合属性*/
flex-flow: row wrap;
/*设置子元素的水平对齐方式*/
justify-content: space-around;
/*!*设置子元素的垂直对齐方式*!*/
/*align-items: center;*/
/*设置子元素垂直的对齐方式*/
align-content: space-around;

}
.item{
/*width: 15rem;*/
height: 13rem;
background-color: #b368ff;
border:5px solid #9dff1f;
box-sizing: border-box;
text-align: center;
line-height: 13rem;
font-size: 3rem;
}
.item:first-child{
/*单个元素的垂直排列方式*/
/*align-self: center;*/
/*排序：按从小到大排序 order值笑的元素在前面*/
order: 5;
/*元素所占比例 占一份*/
flex: 1;
}
.item:nth-child(2){
order: 55;
/*占五份*/
flex: 5;
}
.item:nth-child(3){
order: 25;
}
.item:nth-child(4){
order: 33;
}
.item:nth-child(5){
order: 357;
}
.item:nth-child(6){
order: 5578;
}
.item:nth-child(7){
order: 13;
}
.item:nth-child(8){
order: 0;
}

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

标签：

相关文章推荐

新的分享

章节导航