Flexbox响应式网页布局

摘要：透过Flexbox实现响应式网页布局同样可分为三步：将容器显示为flex，并让它wrap；将需要响应的元素放在容器当中，并用百分比设定每一个元素的basis；通过Media Query将容器的flex方向改为column（预设为row）。

透过Flexbox实现响应式网页布局同样可分为三步：

将容器显示为flex，并让它wrap；
将需要响应的元素放在容器当中，并用百分比设定每一个元素的basis；
通过Media Query将容器的flex方向改为column（预设为row）。

在W3Schools的例子中，Flex容器是这样设定的：

.row {  
  display: flex;
  flex-wrap: wrap;
}

容器当中的两栏，即Flex项目：

/* Sidebar/left column */
.side {
  flex: 30%;
  background-color: #f1f1f1;
  padding: 20px;
}

/* Main column */
.main {
  flex: 70%;
  background-color: white;
  padding: 20px;
}

最后是媒体查询，断点设在700px:

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

改进：移动优先

同样地，我们也对这个例子进行移动优先的改进，当作是练习。

Flex容器：

.row {  
  display: flex;
  flex-direction: column
}

Flex项目：

.side {
  padding: 20px;
  background-color: #f1f1f1;
}

/* Main column */
.main {
  padding: 20px;
  background-color: white;
}

媒体查询：

@media screen and (min-width: 700px) {
  .row {
    flex-direction: row;
  }
  .side {
    flex: 30%;
  }
  .main {
    flex: 70%;
  }
}

一样是，将媒体查询内外的内容交换。W3Schools系列的代码都在GitHub上：W3Schools GitHub

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2155