[英]Split in half vertically and horizontally second flex item
可以請別人指出我如何像下面的圖片一樣垂直和水平地拆分第二個伸縮項目嗎?
我設法將一個大盒子切成兩半,但第二個彈性項目卻無法做到相同。 這就是我現在擁有的-> https://jsfiddle.net/paveu/8c9Ls5s8/
謝謝,
HTML
<div class="desktop">
<div class="yellow">lorem</div>
<div class="orange">lorem</div>
<div class="purple">lorem</div>
<div class="green">lorem</div>
</div>
CSS
* {
box-sizing: border-box;
}
main,
div {
display: flex;
padding: 1rem;
}
.desktop {
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 100%;
align-items: center;
justify-content: center;
align-content: stretch;
}
.desktop > div {
flex: 1;
}
div.orange {
background-color: #FFAD77;
width: 30%;
flex: 0 0 70%;
margin-left: 10px;
}
div.yellow {
flex: 0 0 100%;
width: 70%;
background-color: #FFE377;
}
div.purple {
width: 30%;
margin-left: 10px;
background-color: #FF77C8;
}
@media(max-width: 480px) {
.desktop > div {
flex: 1;
width: 100%;
margin: 0 auto;
}
div.orange {
order: -1;
flex: 2;
}
div.yellow {
flex: 5;
}
div.purple {
flex: 1;
}
}
試試這個告訴我答案是否有問題
HTML:
<div class="desktop">
<div class="yellow">lorem</div>
<div class="orange">lorem</div>
<div class="purple">lorem</div>
<div class="green">lorem</div>
</div>
CSS:
* {
box-sizing: border-box;
}
main,
div {
display: flex;
padding: 1rem;
}
.desktop {
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 100%;
}
div {
flex: 1;
}
div.orange {
background-color: #FFAD77;
width: 30%;
flex: 0 0 50%;
}
div.yellow {
flex: 0 0 100%;
width: 40%;
background-color: #FFE377;
}
div.purple {
flex: 0 0 50%;
width: 30%;
background-color: #FF77C8;
}
div.green{
background-color: green;
width:30%;
}
@media(max-width: 480px) {
.desktop div {
flex: 1;
width: 100%;
}
div[orange] {
order: -1;
flex: 2;
}
div[yellow] {
flex: 5;
}
div[purple] {
flex: 1;
}
div[purple] {
flex: 6;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.