Flexbox piemērs – WEB programmēšana

Šis piemērs var tikt izmantots kā sākuma kods priekš attēlu galerijas. Sīkattēli piekārtojas viens otram elestīgā veidā, kad ekrānā nav vietas, tad elementi pārbīdās uz nākamo rindu. Šeit priekšrocība ir tāda, ka sākumā uz liela ekrāna elementi vienā rindā ir 5, nedaudz samazinot ekrāna izmēru elementu skaits paliek 4, tad 3, tad 2 un visbeidzot 1.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .fixed-size-container {
      max-width: 1200px;
      margin: 40px auto 0 auto;
      background-color: #FFF;
      padding: 30px 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-wrap: wrap;
    }
      .fixed-size {
      width: 150px;
      height: 100px;
      background-color: green;
      color: #FFF;
      line-height: 100px;
      text-align: center;
      font-weight: bold;
      font-size: 60px;
      margin-bottom: 20px;
    }
    </style>
  </head>
  <body>
    <div class="fixed-size-container">
      <div class="fixed-size">1</div>
      <div class="fixed-size">2</div>
      <div class="fixed-size">3</div>
      <div class="fixed-size">4</div>
      <div class="fixed-size">5</div>
    </div>
  </body>
</html>