1

when display: flex flex-container doesn't see's h1s bottom margin or top margin of h1 after flex-container,

but display:inline-flex see's

i want to understand why flex-container behaves like that

h1 {
 color: #555;
}

.flex-container {
 margin:40px auto;
 padding: 10px;
 background-color: #ddd;
 border-radius: 5px;
 list-style: none;
 box-sizing: border-box;
}
.flex-item {
 color: white;
 background-color: firebrick;
 border-radius: 5px;
 padding: 10px;
 margin: 10px;
 font-weight: bold;
 font-size: 2rem;
 box-sizing: border-box;
}


.flex-container {
 display: flex; /* flex | inline-flex */
 // display: inline-flex;
}
<h1>Flexbox</h1>
<ul class="flex-container">
    <li class="flex-item item-1">1</li>
    <li class="flex-item item-2">2</li>
    <li class="flex-item item-3">3</li>
    <li class="flex-item item-4">4</li>
    <li class="flex-item item-5">5</li>
    <li class="flex-item item-6">6</li>
    <li class="flex-item item-7">7</li>
    <li class="flex-item item-8">8</li>
</ul>
<h1>Bottom header</h1>
Bakshi
  • 110
  • 8
  • Possible duplicate of [Difference between display:inline-flex and display:flex](https://stackoverflow.com/questions/27418104/difference-between-displayinline-flex-and-displayflex) – לבני מלכה Nov 01 '18 at 08:27
  • i think you should try taking some block for flex inline so that only inside the block the flex can be applied – Himanshu Nov 01 '18 at 08:30
  • @לבנימלכה in that question have no answer related to this question – Bakshi Nov 01 '18 at 08:50

2 Answers2

0

That is how inline-block/flex works.

Look at this jsfiddle

You are expecting the 2 divs to be on the same row, but instead the display: block property of the first div, is what is coursing this behaviour.

You need to add display: inline-block on the #one div to get you behaviour you are expecting.

Jonas Praem
  • 2,296
  • 5
  • 32
  • 53
0

This is default behaviour.

  • block level elements vertical margins collapse.
  • inline level elements vertical margins do not collapse.

According to the specification:

inline-flex

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents. Flex containers form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.

DreamTeK
  • 32,537
  • 27
  • 112
  • 171