摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <style> .flex { /* basic styling */&
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex {
/* basic styling */
width: 350px;
height: 200px;
border: 1px solid #555;
font: 14px Arial;
/* flexbox setup */
display: flex;
flex-direction: row;
}
.flex > div {
flex: 1 1 auto;
width: 30px; /* To make the transition work nicely. (Transitions to/from
"width:auto" are buggy in Gecko and Webkit, at least.
See http://bugzil.la/731886 for more info.) */
transition: width 0.7s ease-out;
}
/* colors */
.flex > div:nth-child(1){ background: #009246; }
.flex > div:nth-child(2){ background: #F1F2F1; }
.flex > div:nth-child(3){ background: #CE2B37; }
.flex > div:hover {
width: 200px;
}
</style>
</head>
<body>
<p>Flexbox nuovo</p>
<div>
<div>uno</div>
<div>due</div>
<div>tre</div>
</div>
</body>
</html>
弹性盒子
批改老师：查无此人批改时间：2019-01-18 17:14:05
老师总结：作业完成的很好。布局应该对你来说很简单了，继续加油
