F
F
freeman02042016-03-27 14:09:01
css
freeman0204, 2016-03-27 14:09:01

Should I give each block display: flex;?

I want to build a new landing page template. As you know, it basically goes block by block from top to bottom.
I started with

.container {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  margin: auto;
}

But now when I set header display: flex; the logo and menu become horizontally centered. Although in fact if you set display: flex; then they should line up. Why is that? I reassigned in header flex-direction: row; which comes by default. Nothing.
If I need to align the logo and menu to flex I give header display: flex; ? If I need to put menu items in one row I give .dropmenu li display: flex;? and so everything that I want to align with flex;?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Sergey Goryachev, 2016-03-27
@freeman0204

flexbox.help
Experiment.

D
DTX, 2016-03-30
@DirecTwiX

For alignment, there are justify-content and align-items properties.
For child elements, flex-grow, align-self, order are used.
You only need to assign flex to a child block when it will itself be a flex container.
>If I need to align the logo and menu to flex I give header display: flex; ?
This is not understood. And for the last two questions - yes, plus justify-content and align-items.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question