您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
flex布局学习笔记之flex
发布时间：2018-04-10 17:16:07编辑：雪饮阅读（）
使用flex布局的每个容器项还可以直接用flex属性,flex属性是flex-grow、flex-shrink、flex-basis这三个属性的一个综合表示法,属性值有三个,分别对应这三个属性.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
display: flex;
width:800px;
}
#box1{
background:pink;
/*flex-grow、flex-shrink、flex-basis*/
flex:0 10 auto;
width:800px;
height:100px;
flex-shrink:10;
}
#box2{
flex-shrink:1;
background:green;
flex-basis:100px;
}
#box3{
flex-shrink:1;
background:blue;
flex-basis:100px;
height:100px;
}
</style>
</head>
<body>
<div id="box1">第一个盒子</div>
<div id="box2">第二个盒子</div>
<div id="box3">第三个盒子</div>
</body>
</html>
关键字词：flex