Question

我想创建以下CSS布局：thread_local

对于PC版本：有一个大列（1），第二个大列包含（2），（3），（4）作为行。

对于移动版本：有三行，第一行分为两（1），（2），第二行包含（3），第三行包含（4）。

这是我的测试：https://imgur.com/Nj1TzmN

此处的HTML代码：

https://codepen.io/vanicf01/pen/KKwKWpq

此处的CSS代码：

<div class="flexbox">
  <div class="one item">1</div>
  <div class="two item">2</div>
  <div class="three item">3</div>
  <div class="four item">4</div>
</div>

是否可以创建此布局？

Answer 1

尝试一下： HTML：

<div class="flex-container">
  <div class="flex-container__first">
    1
  </div>
  <div class="flexbox">
  <div class="flex-mobile">
     <div class="one item">1</div>
    <div class="two item">2</div>
  </div>  
  <div class="three item">3</div>
  <div class="four item">4</div>
</div>
</div>

CSS：

.flex-container{
  display: inline-flex;
  background:pink;
}
.flex-container__first{
  min-width:50%;
  align-self: center;
  @media (max-width: 600px) {
    display: none;
  }
}
.flexbox {
  display: flex;
  flex-direction:column;
  width: 300px;
  flex-wrap:wrap;
}

.flex-mobile{
  display:inline-flex;
  width:100%;
}

.one {
  background-color: red;
  width:100%;
   @media (min-width: 600px) {
    display: none;
  }
}

.two {
  background-color: blue;
  width:100%;
}

.three {
  background-color: green;
}

.four {
  background-color: yellow;
}

.item {
  padding: 10px;
}

密码笔： https://codepen.io/abdelhedi/pen/bGNGREP

CSS响应式灵活布局布局

1 个答案: