Css Проблемы с макетом сетки (с flexbox) - PullRequest
Новая
       8

Css Проблемы с макетом сетки (с flexbox)

1 голос
/ 29 мая 2020

Я пытаюсь создать макет, используя структуру Flex. Это как раз то основное изображение, которое я хотел.

Этот макет также будет совместим с мобильным представлением.

1- Моя боковая панель не прилипает к нижней части моего компонента-героя. Я использовал "margin-top: -200px;" для этой проблемы. но я не хочу этого.

2- Между моими компонентами я хочу использовать поля, как показано на рисунке. Но поскольку я рассчитываю размер каждого компонента в процентах от «%», и они полностью покрывают страницу, если я даю поле, они становятся переносом. Как я могу это сделать?

3- Как вы думаете, настройки flexbox, которые я применил, верны? Что бы мне лучше поменять?

Заранее благодарю за помощь. 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header {
  background-color: #59D4EB;
  text-align: center;
  height: 80px;
}


/* Main Container */

.container {
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
}


/* Container */

.container-main {
  display: flex;
  flex-wrap: wrap;
}


/* Items */

.hero {
  flex: 1 0 40%;
  height: 400px;
  background-color: #D5C9E2;
}

.main-content {
  flex: 1 0 60%;
  height: 600px;
  background-color: #F5C546;
}

.sidebar {
  height: 500px;
  flex: 1 0 40%;
  background-color: #A0C263;
  /* I DONT WANT USE THİS  MARGİN-TOP */
  margin-top: -200px;
}

.extra-content {
  flex: 1 0 60%;
  background-color: #898989;
  height: 300px;
}


/* Container */

.images-posts-cont {
  display: flex;
  height: 150px;
}


/* Items */

.images {
  flex: 1 0 70%;
  background-color: #53B774;
}

.posts {
  flex: 1 0 30%;
  background-color: #F3CDDD;
}


/* Footer */

.footer {
  text-align: center;
  height: 80px;
  background-color: #F4A540;
}

@media screen and (max-width:599px) {
  .hero {
    flex: 1 0 100%;
    order: 1;
  }
  .sidebar {
    flex: 1 0 100%;
    order: 2;
  }
  .main-content {
    order: 3;
  }
  .extra-content {
    order: 4;
  }
}

;
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="src/css/test.css">
  <title> Flexbox Layout</title>
</head>

<body>
  <!-- FlexBox Layout -->
  <header class="header">
    <h2>header</h2>
  </header>
  <div class="container">
    <section class="container-main">
      <div class="hero">
        <h2>hero</h2>
      </div>
      <div class="main-content">
        <h2>main-content</h2>
      </div>
      <div class="sidebar">
        <h2>sidebar</h2>
      </div>
      <div class="extra-content">
        <h2>extra content</h2>
      </div>
    </section>
    <section class="images-posts-cont">
      <div class="images">
        <h2>related images</h2>
      </div>
      <div class="posts">
        <h2>related posts</h2>
      </div>
    </section>
    <footer class="footer">
      <h2>footer</h2>
    </footer>
  </div>


</body>

</html>

Ответы [ 2 ]

0 голосов
/ 29 мая 2020

Думаю, еще можно использовать флекс. Просто вам нужно обернуть оба компонента слева и справа с помощью div.

  1. left => hero и side nav
  2. right => основной контент и дополнительный контент

Я просто добавляю 2 div. Посмотрите ниже код. 

    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    .header {
      background-color: #59D4EB;
      text-align: center;
      height: 80px;
    }
    
    
    /* Main Container */
    
    .container {
      display: flex;
      flex-flow: column nowrap;
      text-align: center;
    }
    
    
    /* Container */
    
    .container-main {
      display: flex;
      flex-wrap: wrap;
    }
    
    
    /* Items */
    .left{
      width: 40%;
    }
    .right {
      width: 60%;
    }
    .hero {
      height: 400px;
      background-color: #D5C9E2;
    }
    
    .main-content {
      flex: 1 0 60%;
      height: 600px;
      background-color: #F5C546;
    }
    
    .sidebar {
      height: 500px;
      flex: 1 0 40%;
      background-color: #A0C263;
      /* I DONT WANT USE THİS  MARGİN-TOP */
    }
    
    .extra-content {
      flex: 1 0 60%;
      background-color: #898989;
      height: 300px;
    }
    
    
    /* Container */
    
    .images-posts-cont {
      display: flex;
      height: 150px;
    }
    
    
    /* Items */
    
    .images {
      flex: 1 0 70%;
      background-color: #53B774;
    }
    
    .posts {
      flex: 1 0 30%;
      background-color: #F3CDDD;
    }
    
    
    /* Footer */
    
    .footer {
      text-align: center;
      height: 80px;
      background-color: #F4A540;
    }
    
    @media screen and (max-width:599px) {
      .hero {
        flex: 1 0 100%;
        order: 1;
      }
      .sidebar {
        flex: 1 0 100%;
        order: 2;
      }
      .main-content {
        order: 3;
      }
      .extra-content {
        order: 4;
      }
    }
     <body>
         <!-- FlexBox Layout -->
      <header class="header">
        <h2>header</h2>
      </header>
      <div class="container">
        <section class="container-main">
          <div class="left">
          <div class="hero">
            <h2>hero</h2>
          </div>
            <div class="sidebar">
            <h2>sidebar</h2>
          </div>
          </div>
          <div class="right">
          <div class="main-content">
            <h2>main-content</h2>
          </div>
            <div class="extra-content">
            <h2>extra content</h2>
          </div>
          </div>
          
        </section>
        <section class="images-posts-cont">
          <div class="images">
            <h2>related images</h2>
          </div>
          <div class="posts">
            <h2>related posts</h2>
          </div>
        </section>
        <footer class="footer">
          <h2>footer</h2>
        </footer>
      </div>
    </body>
0 голосов
/ 29 мая 2020

Здесь может быть 2 grid s, один с header содержимым и footer, а затем другой grid внутри области содержимого.

Вот возможность начать from для такого макета с grid, где точка останова может превратить вторую grid в макет столбца flex с помощью mediaquer ie (для демонстрации установлено 500 пикселей) : 

body {
  /* first grid of 3 rows , flex can do it too */
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

body main {
  /* second grid for the contents in between header and footer */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 5px 0;
  grid-gap: 5px;
}

header {
  background: #74d3e8;
}


/* set each element inside cell(s) of the grid */

.main {
  grid-row: 1 / span 2;
  grid-column: 2 / span 2;
  background: #f0c354;
}

.hero {
  grid-column: 1;
  grid-row: 1;
  background: #d4cbe0;
}

.sidebar {
  grid-column: 1;
  grid-row: 2 / span 2;
  background: #a7be6d;
}

.extra {
  grid-column: 2 / span 2;
  grid-row: 3;
  background: #898989;
}

.relI {
  grid-column: 1 / span 2;
  grid-row: 4;
  background: #58b076;
}

.relP {
  grid-column: 3;
  grid-row: 4;
  background: #edd0de;
}

footer {
  background: #f4a540;
}

/* set here your break point */

@media screen and (max-width: 500px) {
  body main {
    display: flex;
    flex-flow: column;
  }
  .main {
    flex: 1;
  }
  
  /* from you can use order to reset order of the boxes in main */
}
<header>header</header>
<main>
  <article class="main">Main content</article>
  <section class="hero">hero</section>
  <aside class="sidebar">Sidebar</aside>
  <section class="extra">Extra content</section>
  <aside class="relI">Related images</aside>
  <aside class="relP">Related post</aside>
</main>
<footer>Footer</footer>

Полезный ресурс на go далее: https://gridbyexample.com/ * / https://css-tricks.com/snippets/css/complete-guide-grid/

вот демо для игры: https://codepen.io/gc-nomade/pen/jObgNOO

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...