flex布局示例代码
<!DOCTYPE html>
<html>
<head>
--容器属性
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
.group {
background-color: blue;
overflow: hidden;
display: flex;
height:200px;
//flex-direction: row-reverse;
//flex-wrap:wrap-reverse;
//flex-flow:row wrap-reverse;
// justify-content: flex-end;
//align-items:flex-end;
//flex-wrap:wrap-reverse;
//align-content:center;
}
.block {
width: 33.3%;
padding: 20px;
float: left;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.gray {
background-color: gray;
}
</style>
</head>
<body>
<div class="group">
<div class="block red">1</div>
<div class="block green">2</div>
<div class="block gray">3</div>
</div>
</body>
</html>
--项目属性
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
.group {
background-color: blue;
overflow: hidden;
display: flex;
height:200px;
}
.block {
width: 10%;
padding: 20px;
float: left;
}
.red {
background-color: red;
//order:2;
//flex-grow:1;
//flex-shrink:1;
//flex-basis:100px;
//flex:1 1 100px;
//align-self:center ;
}
.green {
background-color: green;
//order:1;
//flex-grow:2;
//flex-shrink:2;
}
.gray {
background-color: gray;
//order:3;
//flex-grow:1;
//flex-shrink:2;
}
</style>
</head>
<body>
<div class="group">
<div class="block red">1</div>
<div class="block green">2</div>
<div class="block gray">3</div>
</div>
</body>
</html>
