私は次のようなページレイアウトを取得しようとしています：
デスクトップビュー：
|---------------|--------|
| block 1 | block2 |
| | |
| |--------|
| | block3 |
| | |
モバイルビュー：
|---------------|
| block 2 |
|---------------|
| block 1 |
| |
| |
|---------------|
| block 3 |
|---------------|
現時点では、ブロック1と2をflex-wrap flex-directionブロックの幅で配置できます。
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.block1 {
width: 66%;
}
.block2 {
width: 33%;
}
@media (max-width: 580px) {
.block1, .block2 { width: 100%; }
.container { flex-direction: column-reverse; }
}<div class="container">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
</div>ブロック3を配置する方法は？
あなたはこのようにそれを行うことができます：
body {margin: 0}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 100vh; /* height needs to be defined otherwise not possible with flex */
}
.block1 {background: khaki}
.block2 {background: lightgreen}
.block3 {background: lightblue}
.block1 {flex-basis: 100%; width: 66.66%}
.block2, .block3 {flex: 1; width: 33.33%}
@media (max-width: 580px) {
.container > * {width: initial}
.block1 {flex: 2} /* makes it twice as "tall" */
.block2 {order: -1} /* placed above .block1; it's 0 by default */
}<div class="container">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
<div class="block3">Block 3</div>
</div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加