如何用CSS实现row1居中、row2固定底部？适配多设备，优先用Flexbox/Grid

针对你需要的三种设备尺寸布局，我们可以用Flexbox结合媒体查询来实现，代码简单易懂，适合CSS新手。

核心思路 #

Flexbox能轻松控制元素的排列方向和占比，配合媒体查询（根据屏幕宽度调整样式），就能实现不同设备下的布局变化。

1. HTML结构 #

先搭建基础的HTML结构，用一个容器包裹row1和row2两个元素：

<div class="container">
  <div class="row1">row1</div>
  <div class="row2">row2</div>
</div>

2. CSS样式实现 #

基础样式（默认适配小屏设备，对应你右侧的布局） #

设置容器为Flex布局，默认垂直排列元素，让两个元素紧凑分布：

.container {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  width: 100%;
  height: 200px; /* 小屏时容器高度 */
  border: 2px solid #333;
}

.row1, .row2 {
  flex: 1; /* 两个元素平分容器高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #666;
}

中屏设备适配（对应你中间的布局） #

当屏幕宽度在600px到900px之间时，让row1占据大部分高度，row2只占小部分：

@media (min-width: 600px) and (max-width: 900px) {
  .container {
    height: 400px; /* 中屏时容器高度更高 */
  }
  .row1 {
    flex: 8; /* row1占8份高度 */
  }
  .row2 {
    flex: 2; /* row2占2份高度 */
  }
}

大屏设备适配（对应你左侧的布局） #

当屏幕宽度大于900px时，让容器高度进一步增加，row1和row2各占约一半高度：

@media (min-width: 900px) {
  .container {
    height: 450px; /* 大屏时容器高度 */
  }
  .row1 {
    flex: 5; /* row1占5份高度 */
  }
  .row2 {
    flex: 5; /* row2占5份高度 */
  }
}

效果说明 #

• 小屏（<600px）：row1和row2上下紧凑排列，各占一半高度；
• 中屏（600px-900px）：容器高度增加，row1占据大部分空间，row2在底部占小部分；
• 大屏（>900px）：容器高度进一步增加，row1和row2各占约一半高度。

你可以根据实际需求调整容器高度、flex比例值以及媒体查询的宽度阈值，灵活适配不同设备。

内容的提问来源于stack exchange，提问作者huang