flexbox - Rodhos Soft

flexboxを用いて、タイル表示をしてみる。以下を参考にした。
ics.media

HTMLはヘッダーにメニューとmainにタイルとしてdivを置いた。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

  <header>
    <img src="hoge.png" alt="">
    <ul>
      <li><a href="">item1</a></li>
      <li><a href="">item2</a></li>
      <li><a href="">item2</a></li>
    </ul>
  </header>


  <main>
    <!-- カード的なUI  -->
    <div class="animal">
      <h1>うなぎ</h1>
      <img src="images/unagi.jpg" alt="">
      <p>全身がなめらかな皮で覆われている魚である。</p>
    </div>

    <div class="animal">
      <h1>イルカ</h1>
      <img src="images/iruka.jpg" alt="">
      <p>魚のようだが哺乳類である。かしこい。</p>
    </div>

    <div class="animal">
      <h1>いわし</h1>
      <img src="images/iwashi.jpg" alt="">
      <p>最近高くなった。</p>
    </div>

    <div class="animal">
      <h1>どじょう</h1>
      <img src="images/dojou.jpg" alt="">
      <p>もはや見かけない</p>
    </div>
  </main>

  </body>
</html>

レイアウトでflexを用いて均等に配置等を指定する。下記で主軸といっているのが横で交差軸と言ってるのが縦の設定と思えば良い。

/*
 flexには主軸と交差軸という概念
 初期設定では主軸が左から右、交差軸が上から下
*/

/* 主軸を均等割りに */
/* 交差軸を中央に */
header {
  display: flex;
  justify-content: space-between;　
  align-items: center;
}

/* 主軸設定
  flex-start,center,flex-end,space-between(両端は端につく),space-around(両端はボックスの半分)
  交差軸設定
  stretch(親と同じ高さ),flex-start,center,flex-end
*/

/* 交差軸を中央に */
ul {
  display: flex;
  justify-content: space-between;　
  align-items: center;
}


main {
  display: flex;
  flex-wrap: wrap;  /* 複数行配置 */
}

main div.animal {
  width: calc(33.3% - 10px);
  margin: 5px;
}