纯情掉了一地
2018-02-02 04:16:17浏览 5157
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box {
width: 400px;
height: 100px;
background: #ff5555;
position: relative;
display: flex;
margin-left: 200px;
box-shadow: 0px 0px 5px;
padding: 2px;
}
#btn {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 0);
}
#btn1 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 100%);
}
#btn2 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 200%);
}
#btn3 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 300%);
}
#btn4 {
position: absolute;
right: 0;
top: 0;
transform: translate(100%, 400%);
}
.item {
width: 50px;
text-align: center;
color: #fff;
text-decoration: underline;
}
.item:nth-child(1) {
background: #eacf7d;
font-size: 20px;
}
.item:nth-child(2) {
background: yellowgreen;
font-size: 25px;
}
.item:nth-child(3) {
background: deepskyblue;
}
.four {
background: coral;
color:#fff;
font-size: 15px;
text-align: center;
width:50px;
text-decoration: underline;
}
#range {
position: absolute;
left: 0;
bottom: 0;
transform: translate(0, 100%);
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" >
<div class="item one" id="box0">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="four">4</div>
<select id="btn">
<option value="">flex-direction:row</option>
<option value="row-reverse">flex-direction:row-reverse</option>
<option value="column">flex-direction:colum</option>
<option value="column-reverse">flex-direction:colum-reverse</option>
</select>
<select id="btn1">
<option value="">flex-wrap:no-wrap</option>
<option value="wrap">flex-wrap:wrap</option>
<option value="wrap-reverse">flex-wrap:wrap-reverse</option>
</select>
<select id="btn2">
<option value="">align-content:stretch</option>
<option value="flex-start">align-content:flex-start</option>
<option value="flex-end">align-content:flex-end</option>
<option value="center">align-content:center</option>
<option value="space-between">align-content:space-between</option>
<option value="space-around">align-content:space-around</option>
</select>
<select id="btn3">
<option value="">justify-content:flex-start</option>
<option value="flex-start">justify-content:flex-start</option>
<option value="flex-end">justify-content:flex-end</option>
<option value="center">justify-content:center</option>
<option value="space-between">justify-content:space-between</option>
<option value="space-around">justify-content:space-around</option>
</select>
<select id="btn4">
<option value="">align-items:stretch</option>
<option value="flex-start">align-items:flex-start</option>
<option value="flex-end">align-items:flex-end</option>
<option value="center">align-items:center</option>
<option value="baseline">align-items:baseline</option>
<option value="stretch">align-items:stretch</option>
</select>
<input id="range" type="range" value="400" min="0" max="400">
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var btn = document.getElementById('btn');
btn.onclick = function () {
box.style.flexDirection = this.value;
};
var btn1=document.getElementById('btn1')
btn1.onclick = function () {
box.style.flexWrap = this.value;
};
var range = document.getElementById('range');
range.onmousemove = function () {
box.style.width = this.value + 'px';
};
var btn2 = document.getElementById('btn2');
btn2.onclick = function () {
box.style.alignContent=this.value;
};
var btn3=document.getElementById('btn3');
btn3.onclick=function (){
box.style.justifyContent=this.value;
};![图片描述][1]
var btn4=document.getElementById('btn4');
btn4.onclick=function (){
box.style.alignItems=this.value;
}
</script>
</body>
</html>