文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox前端设计需要在容器中的左侧，但右侧伸展全宽

问Flexbox前端设计需要在容器中的左侧，但右侧伸展全宽
EN

Stack Overflow用户

提问于 2020-04-03 04:34:57

回答 2查看 70关注 0票数 0

我正在试着做一个简单的网站，它的设计很棒，让我感到困惑。

这位codepen总结了我想要做的事情。我需要编码一个英雄横幅坐在一个正常的1200px的容器。左边需要一个400px宽的容器，它与下面的400px容器平行。红色的容器需要与下面的紫色容器对齐，但右侧需要延伸到末端。

对我来说最困难的事情是它需要响应性。我已经尝试了所有我能想到的flex，但都没有结果。

如何才能做到这一点？我需要做到这一点只与CSS和HTML，没有JavaScript。

代码笔链接为https://codepen.io/hundredbillion/pen/jOPRdgr

我的代码如下

    <div class="text-image-banner">
      <div class="text-flex">
        <div class="text-content">
          <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange bar below for all screen widths</h5>
        </div>
      </div>
      <div class="img-flex">
        <div class="img">
          <p>This needs to stretch all the way to the right, but the left edge of the red bar must match the left edge of the purple bar for all screen widths. An image will go here</p>
        </div>
      </div>  
    </div>
    <div class="container">
      <p class="center">this is a 1200px container</p>
      <div class="flex">
         <p class="four">text container</p>
        <p class="eight">img container</p>
      </div>

    </div>

和我的css

    .text-image-banner {
      display: flex;
      margin-left:auto;
      margin-right:auto;
    }

    .text-flex {
      background: blue;
      display:flex;
      justify-content:flex-end;
      flex: 1;
    }
    .text-content{
      background: yellow;
      display:flex;
      width:400px;
    }
    .img-flex{
      background: red;
      flex-basis: 1030px;
    }


    /*---- this is a plain vanilla hero banner ----*/
    .container{
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
      background:pink;

    }
    .four{
      background:orange;
      text-align:center;
      width:400px;
      height:200px;
    }
    .eight{
      background:purple;
      text-align:center;
      color:white;
      width:800px;
    }
    .flex{
      display:flex;
    }
    .center{
      text-align:center;
    }

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-10 02:33:43

所以事实证明，使用css grid-template-area可以让我得到我想要的东西。这里有一个可能的解决方案。希望它能帮助其他被同样的问题困扰的人。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <style>
      *{
        overflow: hidden;
      }

      .container {
        display: grid;
        grid-template-columns: auto 400px 800px auto;
        grid-template-areas: ". header-text header-image header-image"
                            ". body-text body-image. ";
        background-color: #2B3D41;
      }
      .header-text {
        grid-area: header-text;
        background-color: #F9B9F2;
      }
      .header-image {
        grid-area: header-image;
        background-color: #BCA0BC;
      }
      .body-text {
        grid-area: body-text;
        background-color: #4C5F6B;
      }
      .body-image {
        grid-area: body-image;
        background-color: #83A0A0;
      }
      @media screen and (max-width: 1200px) {
        .container {
          grid-template-columns: 33.3% 66.6%;
          grid-template-areas: "header-text header-image"
                              "body-text body-image";
        }
      }
      @media screen and (max-width: 768px) {
        .container {
          display: block;
        }
      }

    </style>
  </head>
  <body>
    <div class="container">
      <div class="header-text">
        <h5>This needs to be 400px wide and the right and left edges must match the right and left edges of the orange div
          below for all screen widths. </h5>
      </div>
      <div class="header-image">
        <p>This needs to stretch all.An image will go here</p>
      </div>

      <p class="body-text">text container</p>
      <p class="body-image">img container</p>

    </div>

  </body>
</html>

票数 0

Stack Overflow用户

发布于 2020-04-03 04:37:05

我建议你使用css grid，而不是使用纯flex。我将提供一个示例

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 400px 1fr;
  grid-template-rows: auto;
  background-color: #fff;
  color: #444;
}

.eight {
  background: purple;
  text-align: center;
  color: white;
  width: 800px;
}

.footer {
  grid-column: span 2;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}

<div class="wrapper">
  <div class="box sidebar">left</div>
  <div class="box sidebar">right</div>
  <div class="text-container">Content
    <br /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac porta sapien. Maecenas lacus erat, suscipit bibendum bibendum ut, scelerisque vehicula nisl. Integer eget lorem non ex laoreet pellentesque. Aenean pulvinar rhoncus fermentum.
    Nunc sit amet suscipit nibh. Pellentesque ullamcorper neque eget dui iaculis lobortis quis nec diam. Nulla in bibendum enim. Ut elementum nunc risus, bibendum semper turpis ornare eget. In et vulputate mauris. Cras eu velit et ipsum tempor congue
    at sit amet odio. Aenean at urna vitae urna rutrum pretium eu id odio. Curabitur suscipit libero in lobortis finibus. Proin libero nunc, venenatis ultricies dapibus ac, accumsan quis lacus. Pellentesque eleifend velit ac finibus tristique. Praesent
    dapibus, erat dignissim cursus aliquam, dui velit auctor turpis, sed maximus est nisl in eros. Sed et eros in nibh vulputate imperdiet. Phasellus dignissim feugiat odio, et volutpat ante vestibulum non. Cras venenatis urna quis felis lacinia imperdiet.
    Quisque convallis lacus at nulla mollis, quis porttitor arcu scelerisque. Proin neque arcu, rutrum mollis egestas vel, malesuada vitae massa. Cras fringilla, quam ut suscipit lacinia, dolor tortor porta urna, id accumsan dolor dui vel ligula. Donec
    sollicitudin consequat dapibus. Nulla eget fringilla leo. Curabitur a lacus id odio varius mollis eu eget risus. Aliquam mauris mi, pulvinar ut justo ut, accumsan euismod augue. Quisque non faucibus arcu. Proin neque ante, aliquet nec mi vel, fringilla
    cursus nisi. Sed egestas sollicitudin ligula, vel auctor metus dictum vitae. Vivamus eget nisl malesuada, egestas neque placerat, vestibulum nisi. Curabitur aliquam metus sit amet velit vestibulum posuere. Suspendisse augue eros, pulvinar quis ante
    vitae, ultrices placerat dui. Aenean vehicula accumsan arcu id dapibus. Phasellus fermentum massa euismod auctor tristique. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam orci ligula, suscipit a mi in,
    blandit sodales purus. Vivamus a feugiat leo. Cras eu tellus laoreet, luctus erat sit amet, convallis tellus. Vivamus scelerisque purus at nisl convallis pharetra. Nam consectetur, nisl quis interdum porttitor, magna ipsum facilisis quam, ut euismod
    ligula dui sit amet nulla. Donec massa eros, iaculis sed dui pellentesque, fermentum malesuada nulla. In consequat eu ipsum non convallis. Morbi dapibus accumsan risus eu efficitur. Vivamus dolor velit, congue eget felis nec, mollis tincidunt quam.
    Curabitur placerat vestibulum nisl non malesuada. Cras justo purus, molestie pulvinar convallis sed, aliquam at velit. Quisque laoreet semper feugiat. Maecenas varius ut lorem ac feugiat. Nullam interdum metus eu blandit venenatis. Nam condimentum
    pretium ex, a sagittis eros pellentesque vitae. Quisque aliquet euismod orci sed egestas. Nullam porta, lacus vel venenatis feugiat, lectus lectus luctus urna, nec ultrices elit felis in augue. Donec non nisi imperdiet, efficitur nibh quis, imperdiet
    elit. Sed quis fringilla mauris. Proin at enim tempor, posuere quam a, pulvinar justo. Aliquam in mi enim.</div>
  <div class="eight">img container</div>
  <div class="box footer">Full width footer</div>
</div>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61000659

复制

相似问题

问Flexbox前端设计需要在容器中的左侧，但右侧伸展全宽
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox前端设计需要在容器中的左侧，但右侧伸展全宽EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox前端设计需要在容器中的左侧，但右侧伸展全宽
EN