CSS flexbox 两列答案

【问题标题】：CSS flexbox two columnsCSS flexbox 两列
【发布时间】：2019-07-30 02:02:09
【问题描述】：

我正在尝试使用 flex 框制作一个纯 HTML/CSS 网站，使用占左侧 50% 的图像，占右侧 50% 的文本框，页脚占 100%它们下方的宽度（稍后我想添加一个导航，可能是一个汉堡菜单，与此问题 atm 无关），同时使它们能够响应不同尺寸的设备。 *我希望图像和右文本框在较小的设备上包装成一列（文本框顶部的图像）

我遇到的问题是，将图像设置为 max-width 或 max-height 100% 使其大于它所在的 div 容器，图像没有完全填满盒子，（我想保留图片与原始大小成比例）

正如您在下面看到的，图片并没有占用 100% 的容器，下面的 CSS 并不是我一直在试验的唯一 CSS。但我一直在查看我在 stackoverflow 等上找到的其他文章，但没有找到完全相同的问题；

body {
  font-family: 'Roboto Mono', monospace;
  margin: 0px;
  padding: 0px;
  text-align: left;
  display:block
  }

img {
  // width:auto;
  max-height: 100%;
  // overflow: none;
  // position: absolute;
 height: 400px;
 // max-width: 100%;
 top: 0;
 bottom: 0;
 border: 1px solid green;
}

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

.container > * {
  padding: 0px;
  flex: 1 100%; }

@media all and (min-width: 600px) {
  .content {
    flex: 1 0;
    }
  }

【问题讨论】：

请发布足够的代码来重现问题。
您还需要发布您的 HTML 代码，以便我们帮助解决问题
请创建一个代码 sn-p 或添加一个 jsfidlle 链接。谢谢

标签： html css responsive-design flexbox

【解决方案1】：

请查看以下示例。也许对你有帮助。

  *, ::after, ::before {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family:sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
  }
  img {
    max-width: 100%;
  }
  .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
  }
  .content .col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 15px;
    padding-right: 15px;
  }
  .footer {
    background: #eee;
    height: 100px;
  }
  @media(max-width: 767px){
    .content .col {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
</head>
<body>
  <div class="wrapper">
    <main>
      <div class="container">
        <div class="content">
          <div class="col left">
            <img src="https://images.pexels.com/photos/994517/pexels-photo-994517.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" title="" alt=""/>
          </div>
          <div class="col right">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>
    </main>

    <footer>
      <div class="footer"></div>
    </footer>
  </div>
</body>
</html>

【讨论】：

这正是我想要的！这有什么表现呢？ *, ::after, ::before { box-sizing:border-box; }