Дизайн передней части Flexbox требует левой стороны в контейнере, но правая сторона растягивается на всю ширину - PullRequest
Новая
       0

Дизайн передней части Flexbox требует левой стороны в контейнере, но правая сторона растягивается на всю ширину

0 голосов
/ 02 апреля 2020

enter image description here

Я пытаюсь сделать простой сайт с потрясающим дизайном, который поставил меня в тупик.

Этот кодекс подводит итог того, что я пытаюсь сделать. Мне нужно написать код героя, который находится поверх обычного контейнера в 1200 пикселей. Левой стороне нужен контейнер шириной 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;
    }

Ответы [ 2 ]

0 голосов
/ 09 апреля 2020

Получается, что использование 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 голосов
/ 02 апреля 2020

Я бы предложил вам использовать сетку css вместо чистого сгибания. Я приведу пример 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...