0

In this old stackoverflow question, i have read the code with the question but could not figure out why this code produces a header and a footer that could take up width 100% and not displayed in the same line with other elements??

Understanding the flex property

Asons
  • 84,923
  • 12
  • 110
  • 165
Code Eagle
  • 1,293
  • 1
  • 17
  • 34
  • The "This is why:" part in the linked post answer your question. When _flex wrap_ is used, any element having width set to 100% will take a row by itself, and the `header` and `footer` are the only one that does. – Asons Mar 14 '19 at 04:13
  • Initially, all the `wrapper`'s children were set to be 100% (`.wrapper > * { flex: 1 100%; }`), but further down the CSS, `main` and `aside` got new value for their _flex-basis_ property making them share a row. – Asons Mar 14 '19 at 04:29

1 Answers1

0

in fact, you have three lines, (represented in that red box) but in the middle line you have three other boxes, these boxes are placed side by side because the middle box has the property display: flex; this defines that your direct children will be shown side by side enter image description here

(sorry, I'm a terrible designer)

note that the only difference of the body to the footer and header is that it has a greater height, taking away the fact that it has other boxes inside its behavior is identical to the footer and body

note that the div element has a default display block which means that it will occupy 100% of its line, otherwise you can use the display: inline; this will make the element occupy only the space of the child element, an example:

.wrapper-h1 {
  background-color: red;
}
<div class="wrapper-h1">
  <h1>first h1</h1>
</div>
<div class="wrapper-h1">
  <h1>second h1</h1>
</div>

In this exemply by default the two wrapper have display: block; property

.wrapper-h1 {
  background-color: red;
  display: inline-block;
}
<div class="wrapper-h1">
  <h1>first h1</h1>
</div>
<div class="wrapper-h1">
  <h1>second h1</h1>
</div>

and here they appear side by side, on account of the inline property changing its standard behavior. each tag has a default behavior type, the default display of the div tag is this, occupying 100% of the parent element

TheDev
  • 407
  • 2
  • 12
  • Unfortunately this doesn't answer the question asked. It also contain incorrect statements, e.g. _"...`display: flex;` defines that your direct children will be shown side by side"_. If you want to help users, either delete this answer or edit it to be correct. Also, the duplicate have a great explanation to why, so there is really no need for one more. – Asons Mar 14 '19 at 05:37
  • you're right about the other question answer well a part of what I replied, but this what I said is not incorrect. the doubt has a lot to do with the behavior of the property dispaly, you are wrong to say that I did not answer the question already wue I explained well why there are three row – TheDev Mar 14 '19 at 11:04