<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#big{
height: 500px;
border: 2px solid black;
resize: both;
overflow: hidden;
/*申明为flex容器*/
display: flex;
/*水平居中*/
justify-content: center;
/*右对齐*/
/*justify-content: flex-end;*/
/* 两端对齐*/
/* justify-content: space-between;*/
/*两端保持一样的距离*/
justify-content: space-around;
}
.box{
width: 200px;
height: 200px;
color: white;
font-size: 100px;
flex-shrink: 0;
}
.mi{
width: 200px;
height: 200px;
color: white;
font-size: 100px;
flex-shrink: 0;
}
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
#orange{
background-color: orange;
}
#fuchsia{
background-color: fuchsia;
}
#cornflowerblue{
background-color: cornflowerblue;
}
#darkgoldenrod{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div id="big">
<div class="box" id="red">1</div>
<div class="box" id="blue">2</div>
<div class="box" id="green">3</div>
<div class="box mi" id="orange">4</div>
<div class="box" id="fuchsia">5</div>
<div class="box" id="cornflowerblue">6</div>
<div class="box" id="darkgoldenrod">7</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#big{
height: 500px;
border: 2px solid black;
resize: both;
overflow: hidden;
/*申明为flex容器*/
display: flex;
/*左对齐从左到右的顺序*/
/* flex-direction: row;*/
/*从右到左*/
/* flex-direction: row-reverse;*/
/*纵向排列，从上到下*/
/*flex-direction: column;*/
/*纵向排列 从下到往上*/
flex-direction: column-reverse;
}
.box{
width: 200px;
height: 200px;
color: white;
font-size: 100px;
}
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
</style>
</head>
<body>
<div id="big">
<div class="box" id="red">1</div>
<div class="box" id="blue">2</div>
<div class="box" id="green">3</div>
</div>
</body>
</html>
3129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
