Empilement

 https://docs.google.com/document/d/1H6Engyz5ZtGPTMeUB1KruI4OQ2IWRInSq6BrxA8oLY4/edit?usp=sharing

z-index : EDGE : 3D

 Edge possède un outil de visualisation des couches z-index !

On voit les positions relative et absolue de notre menu 

 

Random img

     <img src="https://source.unsplash.com/random/600x400" alt="">

Gap

 Gap est arrivé !

See the Pen test gap by dupont (@dupontcodepen) on CodePen.

Gouttier : flex

 Gouttière : how to !

 Lien

HTML

<div class="conteneur">

   <div class="row">

     <div id="it1">

      <p>Lore</p>

</div>

</div>

</div>

Visuel

HTML

<div class="conteneur">

   <div class="row">

     <div id="it1">

      <p>Lore</p>

    </div>

</div>

</div>

 

Visuel

CSS

.conteneur {    padding-right: 15px;   padding-left: 15px; }
.row{    margin-right: -15px;   margin-left: -15px;   margin-top: 1em;   margin-bottom: 1em; }
.row> * {   padding-right: 15px;   padding-left: 15px; }

 

 CSS 

.row {

  display: flex;

  flex-wrap: wrap;

}

 

.row > * {

  flex: 0 0 33.333333%;

  box-sizing: border-box;

  max-width:33.33333%;

}