感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<h1>Flexbox</h1>
<div class="container">
<div class="initial">空间足够宽度是200px,如果空间不足会变窄到100px。 </div>
<div class="none">无论窗口如何变化,宽度一直是200px。 </div>
<div class="flex1">占满剩余宽度的1/3。 </div>
<div class="flex2">占满剩余宽度的2/3。 </div>
</div>
</body>
</html>
输入 JavaScript 代码……
xxxxxxxxxx
.container {
display: -webkit-flex;
display: flex;
border: solid red;
}
.initial {
-webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;
margin: 2px;
border: solid 1px green;
.none {
-webkit-flex: none;
flex: none;
.flex1 {
-webkit-flex: 1;
flex: 1;
.flex2 {
-webkit-flex: 2;
flex: 2;