<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container{
display: flex;
/*flex-direction: row-reverse;*/
/*flex-wrap:wrap;*/
height: 300px;
border: 1px solid red;
}
#left{
width: 20%;
background-color: darkmagenta;
height: 100px;
order: 2;
align-self: flex-end;
}
#center{
width: 80%;
background-color:crimson;
height: 100px;
order: 1;
flex-shrink:1 ;
}
#right{
width: 20%;
background-color:brown;
height: 100px;
order: 3;
}
/*#right2{
width: 20%;
background-color:yellow;
height: 100px;
}*/
</style>
<title>FLEX</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
<!--<div id="right2">right2</div>-->
</div>
<div>12121212</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container{
display: flex;
/*flex-direction: row-reverse;*/
/*flex-wrap:wrap;*/
height: 300px;
border: 1px solid red;
}
#left{
width: 20%;
background-color: darkmagenta;
height: 100px;
order: 2;
align-self: flex-end;
}
#center{
width: 80%;
background-color:crimson;
height: 100px;
order: 1;
flex-shrink:1 ;
}
#right{
width: 20%;
background-color:brown;
height: 100px;
order: 3;
}
/*#right2{
width: 20%;
background-color:yellow;
height: 100px;
}*/
</style>
<title>FLEX</title>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
<!--<div id="right2">right2</div>-->
</div>
<div>12121212</div>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
