我正在尝试使用flexbox构建新标头。移动和大屏幕标题版本有点不同,这导致冲突,我不能让它工作。
是否可以使用flexbox构建此类场景?
<h1>Mobile header</h1>
<div class="container">
<div class="box logo"><span>LOGO</span></div>
<div class="box menu-2"><span>Menu 2</span></div>
<div class="box cart"><span>Cart</span></div>
</div>
<h1>Large screen header</h1>
<div class="container">
<div class="box logo large"><span>LOGO</span></div>
<div class="box menu-1 large"><span>Menu 1</span></div>
<div class="box menu-2 large"><span>Menu 2</span></div>
<div class="box cart large"><span>Cart</span></div>
</div>
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.logo { order: 1;}
.menu-2 { order: 0;}
.cart { order: 3;}
.logo.large{ order: 0; flex-basis: calc(10%);}
.menu-1.large { order: 1; flex-basis: calc(90%); }
.menu-2.large { order: 2; flex-basis: calc(80%); }
.cart.large { order: 3; flex-basis: calc(10%); }
.box {
background-color: lightgreen;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
padding: 10px;
border: 1px dashed black;
}
h1 {
text-align: center;
width 100%;
font-size: 1em;
padding: 10px;
margin-bottom: 10px;
font-style: italic;
}