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%;

}