<body>
  <main>
    <h1>L'interMEDIAire</h1>
    <h2>Flexes Boxes</h2>
    <div class="flex">
      <div class="flex-item flex_width_33">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_33">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_33">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
    </div>
    <div class="flex">
      <div class="flex-item flex_width_50">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_50">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
    </div>
    <div class="flex">
      <div class="flex-item flex_width_25">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_25">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_25">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
      <div class="flex-item flex_width_25">
        <img src="https://picsum.photos/400/400" alt="">
      </div>
    </div>
    <div class="flex">
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
      <div class="flex-item flex_width_10"><img src="https://picsum.photos/400/400" alt=""></div>
    </div>
  </main>
</body>
/*COULEURS*/
$noir:        rgba(0,0,0,1);
$noirfonce:   rgba(29,31,32,1);
$rose:        rgba(152,38,114,1);
$bleu:        rgba(128,155,189,1);
$blanc:       rgba(255,255,255,1);
$padding:     20px 10px;
$gutter:      12px;
$widths:      "10", "20", "25", "33", "40", "50";
*,*:after,*:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/*MIXINS*/
@mixin flex($direction:row,$espace:space-around,$alignement:center,$alignement_contenu:flex-start) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: $direction;
  flex-direction: $direction;
  -webkit-box-pack: $espace;
  -ms-flex-pack: $espace;
  justify-content: $espace;
  -webkit-box-align: $alignement;
  -ms-flex-align: $alignement;
  align-items: $alignement;
  -ms-flex-line-pack: $alignement_contenu;
  align-content: $alignement_contenu;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*FLEXES BOXES*/
/*rows*/
.flex {
  @include flex();
  margin: 0px auto;
  width: 90%;

  /*columns*/
  .flex-item {
    margin: 3px;
    width: 100%;

    img {
      width: 100%;
    }
  }
}

@media screen and (min-width: 480px) {
  @each $width in $widths {
    .flex .flex_width_#{$width} {
      width: calc(#{$width}% - #{$gutter});
      margin: $gutter/2 0px;
    }
  }
}
/*(STYLE intermediaire)*/
body {
  max-width: 1280px;
  margin: 0px auto;
  padding: $padding;
  background: $noir;
  color: $blanc;

  font-size: 1em;
  text-align: center;

  main {
    padding: $padding;
    background: $noirfonce;
  }

  h1 {
    margin: 0;
    padding: 0;
    font-size: 1.4em;
    color: $bleu;
  }

  h2 {
    margin-top: 15px;
    width: 100%;
    color: $rose;
  }

  h1,h2 {
    font-family: 'Inconsolata', monospace;
  }

  img {
    //margin-top: 20px;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  }
}
/*lintermediaire.be*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.