widthとかflex-basisに便利【calc】

今回は、flexを用いたレイアウトの時に知っていると便利な関数を紹介します。

動作サンプルは、サイズを変更してもコンテンツの間に常に20pxのmarginを確保するようになっています。

<html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="backgroundBox">
        <div class="Container">
          <div class="flexBox">
            <div class="flexItem"><img src="images/sample.png"></div>
            <p class="text01">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

<css>

* {
  margin: 0;
  padding: 0; }

img {
  max-width: 100%; }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

table {
  border-collapse: collapse;
  border-spacing: 0; }
.backgroundBox {
  background-color: #9e9e9e66; }

.Container {
  max-width: 780px;
  margin: 0 auto;
  padding-top: 30px;
  padding-bottom: 50px; }

.flexBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: white; }

.flexItem img {
  max-width: 100%; }

.flexItem {
  -webkit-flex-basis: calc(calc(100% / 2) - 10px);
  -ms-flex-preferred-size: calc(calc(100% / 2) - 10px);
  flex-basis: calc(calc(100% / 2) - 10px); }

.flexBox .text01 {
  background-color: #73d21d;
  color: white;
  -webkit-flex-basis: calc(calc(100% / 2) - 10px);
  -ms-flex-preferred-size: calc(calc(100% / 2) - 10px);
  flex-basis: calc(calc(100% / 2) - 10px); }

<ポイント>

・flexを適用する子要素にflex-basisを用いて、幅を定義します。

この際に、calc関数を用いることで幅を計算させることができます。

例1)100%が780pxのとき

flexを適用する親要素の最大幅は780px

子要素の50%は390px

margin分を10px確保

これで、子要素はそれぞれ380px、marginを20px確保することができる。

このように、計算次第でmarginを確保できるので、calcはおススメです。

今回は以上です。