时间戳

首页 > 解决方案 > 移动分辨率和容器的flexlayout问题

css - 移动分辨率和容器的flexlayout问题

问题描述

你好，我的 flexbox 中有以下结构

页眉主页脚

在我的主要内容中，我有一个容器来集中内容但是当我使用较小的分辨率时，它会出现问题，如照片所示：

在此处输入图像描述

代码：

export default function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
      <div style={{ flex: "none", background: "blue", height: "140px" }}>a</div>
      <div
        style={{
          padding: "0 30px",
          margin: "0 auto",
          background: "red",
          maxWidth: "1240px",
          width: "100%"
        }}
      >
        <h2>
          Nam dui ligula, fringilla a, euismod sodales, sollicitudin vel, wisi..
        </h2>
      </div>
      <div style={{ flex: "none", background: "yellow", height: "40px" }}>
        c
      </div>
    </div>
  );
}

CSS重置：

body > #root > div {
  height: 100vh;
  background: black;
}

body {
  margin: 0;
  padding: 0;
}

例子：

https://codesandbox.io/s/throbbing-feather-cmxiq

标签： css

解决方案

width 属性不包括内边距，因此当您的中间元素在左侧和右侧包括 30px 内边距并且也设置为 100% 宽度时，它会导致 x 溢出。如果您希望中间元素的整个边界框为 100% 宽度，您可以执行以下样式：

  <div
    style={{
      padding: "0 30px",
      margin: "0 auto",
      background: "red",
      maxWidth: "1240px",
      width: "calc(100% - 60px)"
    }}
  >

推荐阅读