<h1>flex-wrap 属性</h1>
<div id="controller">
<div>flex-wrap:</div>
<span>nowrap</span>
<span>wrap</span>
<span>wrap-reverse</span>
<div>;</div>
</div>
<div id="demo">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
body{
padding: 10px 30px 30px;
}
h1{
text-align: center;
}
#controller{
text-align: center;
margin-bottom: 30px;
font-size: 0;
div{
display: inline-block;
font-size: 16px;
margin: 0 5px;
}
span{
display: inline-block;
font-size: 12px;
padding: 5px 10px;
background-color: #ccc;
color: #333;
margin-right: 1px;
cursor: pointer;
&.selected{
background-color: #06f;
color: #fff;
}
}
}
#demo{
display: flex;
border: 1px solid;
padding: 10px;
counter-reset: items;
.item{
margin: 10px;
padding: 20px 0;
width: 150px;
text-align: center;
background-color: #ccc;
counter-increment: items 1;
&::before{
content: 'item' counter(items);
}
}
}
.nowrap{
flex-wrap: nowrap;
}
.wrap{
flex-wrap: wrap;
}
.wrap-reverse{
flex-wrap: wrap-reverse;
}
View Compiled
$('#controller span').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
$('#demo').removeClass().addClass($(this).text());
});
$('#controller span:first').click();
This Pen doesn't use any external CSS resources.