三列响应式设计

Question

对于这个任务，我不能使用Bootstrap。我使用Reactjs和Radium（像React-Native一样的样式），我尝试使用flexbox，但我能够使用CSS和媒体查询。

我有一个3列布局。在桌面上访问时，它显示如下：

--------------------------
|  column 1 |            |
------------|  column 2  |
|  column 3 |            |
--------------------------

第一列和第三列的高度将与第二列相同。

当在移动设备/平板电脑上查看或调整浏览器大小时，我希望它看起来像这样：

-------------
|  column 1 |
-------------
|  column 2 |
-------------
|  column 3 |
-------------

第二列需要在第一列和第三列之间移动，每列的高度在此配置中不重要。

以下是我的示例，我使用了radium，但我也可以使用CSS和Media Queries。

columnsContainer: {
    display: "flex",
    flexDirection: "row",
    @media (min-width:"xxx"px): {
        flexDirection: "column"
    }
},
rightColumn: {
    width: "392px",
    @media (min-width:"xxx"px): {
        marginTop: "32px",
        width: "100%"
    }
},
leftColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    }
},
bottomColumn: {
    flex: "1",
    @media (min-width:"xxx"px): {
        marginRight: "0px",
        marginLeft: "0px"
    },
}

以下是我的html代码：

在下面：

<div style={styles.columnsContainer}>
    <div style={styles.leftColumn}>
        Column 1
    </div>
    <div style={styles.rightColumn}>
        Column 2
    </div>
    <div style={styles.bottomColumn}>
        Column 3
    </div>
</div>

- Juan Vargas

---

请展示一些代码示例...你尝试过什么？ - kay

你使用了任何框架吗？你使用的是什么尺寸单位？ - Mihail Minkov

@MihailMinkov 我使用带有Radium的ReactJS（类似于React Native的样式），我尝试使用Flexbox，但我只能使用CSS和MediaQueries。 - Juan Vargas

@kay 我已经尝试了 flexbox，但是效果不太好，我认为我需要一个媒体查询。 - Juan Vargas

Answer 1

如果您能使用Flexbox，这里有一个可以尝试的例子。

使用order根据需求放置列。

.outer {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.one {
  background: red;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

.two {
  background: blue;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

.three {
  background: green;
  height: 200px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
}

@media only screen and (max-width: 600px) {
  .outer {
    max-height: 400px;
  }
  .one {
    width: 50%;
    order: 1;
  }
  .two {
    width: 50%;
    order: 3;
    height: 400px;
  }
  .three {
    width: 50%;
    order: 2;
  }
}

<div class="outer">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
</div>

- Dhaval Jardosh

---

看起来不错，但是我该如何将第一列和第三列放入一个列容器中，并在屏幕尺寸改变时将第二列放入第一列和第三列中呢？ - Juan Vargas

你说的“column container”，是指 <div class="column"> 吗？需要修改你的 HTML 代码吗？ - Dhaval Jardosh

Answer 2

好的，我在 CSS 网格中找到了答案：

columnsContainer {
    display: "grid",
    gridTemplateColumns: "1fr auto",
    @media (min-width:"xxx"px): {
        gridTemplateColumns: "auto"
    }
},
rightColumn: {
    gridColumn: "2",
    gridRow: "1 / 3",
    @media (min-width:"xxx"px): {
        gridColumn: "1 / 2",
        gridRow: "2",
        width: "auto"
    }
},
leftColumn: {
    @media (min-width:"xxx"px): {
        gridRow: "1",
    }
},
bottomColumn: {
    @media (min-width:"xxx"px):: {
        gridRow: "3",
    }
}

以及HTML代码：

<div style={styles.columnsContainer}>
    <div style={styles.leftColumn}>
        Column 1
    </div>
    <div style={styles.rightColumn}>
        Column 2
    </div>
    <div style={styles.bottomColumn}>
        Column 3
    </div>
</div>

非常感谢您的帮助！

- Juan Vargas