When working with flexbox, what is the correct way to create a standard grid?

G

GeorgeKay2018-04-17 21:56:08

css

GeorgeKay, 2018-04-17 21:56:08

Let's say this code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Швейный кластер</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="main">
    <div class="header"></div>
    <div class="content">
      <div class="inner-content"></div>
      <div class="inner-sidebar"></div>
    </div>
    <div class="footer"></div>
  </div>
</body>
</html>

How to use flexbox correctly? Need to make main a container?, and inside it header, content, footer should be made container elements? If so, is it possible then to make header, content, footer containers too. Or just make header, content, footer containers without main and work with them separately. And also, when working with flexbox, do you need to do a bunch of blocks in blocks, as when working with floats? Let's create a bunch of inner

<body>
  <div class="wrapper">
    <div class="header">
      <div class="inner-header"></div>
    </div>
    <div class="row">
      <div class="content">
        <div class="inner-content"></div>
      </div>
      <div class="sidebar">
        <div class="inner-sidebar"></div>
      </div>
    </div>
    <div class="footer">
      <div class="inner-footer"></div>
    </div>
  </div>
</body>

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

F

Faraday_22, 2018-04-18
@Faraday_22

The grid can be taken from bootstrap4, there is an excellent grid on flex

J

Jumandjilos, 2018-04-18
@Jumandjilos

Well, usually it's better to do a site wrapper block, then from the header, footer, etc. Of course you can make containers. You don’t need to do a bunch of blocks, flex is much easier than float, it’s better to watch a couple of videos on YouTube, where they basically talk about flex and you’ll understand everything, so I explained it in a nutshell as best I can

N

Nikita, 2018-04-18
@Rema1ns

flexboxgrid.com

I

IriniSh, 2018-04-18
@IriniSh

No additional wrappers are needed. Set the parent to display: flex and all of its children will be aligned to the flex grid. From your 1st example it is
.main {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
.header, .content, .footer { width: 100%; }
Then we make the main content
.content {
display: flex;
flex-flow: row nowrap;
}