时间戳

首页 > 解决方案 > CSS 响应式改变 flex 布局

css - CSS 响应式改变 flex 布局

问题描述

我想创建这个 CSS 布局：https://imgur.com/Nj1TzmN

对于 PC 版：有一大列 (1) 和第二大列，其中包含 (2)、(3)、(4) 作为行。

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

这是我的测试：https://codepen.io/vanicf01/pen/KKwKWpq

此处的 HTML 代码：

<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>

这里的 CSS 代码：

.flexbox {
  display: flex;
  width: 300px;
}

.item:nth-of-type(1) { flex-grow: 3; }
.item:nth-of-type(2) { flex-grow: 1; }
.item:nth-of-type(3) { flex-grow: 1; }
.item:nth-of-type(4) { flex-grow: 1; }

.one {
  background-color: red;
  flex-grow: 3;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}

.four {
  background-color: yellow;
}

.item {
  padding: 10px;
}

是否可以创建此布局？

标签： cssflexbox

解决方案

试试这个： 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

推荐阅读