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

}