#33 よく使うflex 【ぴよぴよコーダーの開発日記】

たまには、コーダーらしい記事を。。。よく使うflexをまとめてみました。

上下左右中央揃え　デモ

<div class="center">
   <p class="center__inner">404 Sorry... We couldn't find that page.</p>
</div>

.center {
   display: flex;
   justify-content: center;
   align-items: center;
/* 以下任意。*/
   border: 1px solid #333;
   margin: auto;
   height: 300px;
}

両端揃え　デモ

<h3 class="sepalate__title">
   <span>Product List Title</span>
   <a href="#" style="font-size: 1rem;">Detail</a>
</h3>

.sepalate__title {
   display: flex;
   justify-content: space-between;
   align-items: center;
/* 以下任意。*/
   border: 1px solid #333;
   padding: 5px 20px;
}

2カラム　デモ

<div class="sepalate__box">
   <div class="sepalate__box__inner">item01</div>
   <div class="sepalate__box__inner">item02</div>
</div>

.sepalate__box {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.sepalate__box__inner {
   flex: 1;
   /* 以下任意。*/
   border: 1px solid #333;
   padding: 20px;
   min-height: 100px;
   text-align: center;
}
.sepalate__box__inner + .sepalate__box__inner {
   margin-left: 10px;
}
@media (max-width: 770px) {
   .sepalate__box {
       flex-direction: column;
   }
   .sepalate__box__inner + .sepalate__box__inner {
       margin-top: 10px;
       margin-left: 0;
   }
}

2カラムの中に2カラム　デモ：よくこういうデザインするデザイナーいるけどレスポンシブに向いていないのでコーダーに嫌がられる。
ほぼ4カラムだからな。これ。やるならタブレットでの見え方も提示しておいてあげてください。えらそうですまん。
文字の大きさ次第で、5文字で改行とかざらにあるから。ブラウザを770pxくらいに縮めたときにどう変化するか確認してください。　

<div class="sepalate__box">
   <div class="sepalate__box__inner sepalate__inner-box">
      <div class="sepalate__inner-box-catch">
         <img src="https://dummyimage.com/158x158/aaa/fff&amp;text=image" alt="dummy image" class="sepalate__inner-box-catch-img">
      </div>
      <div class="sepalate__inner-box-detail">
         <h3 class="sepalate__inner-box-detail-title">title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
   </div>
   <div class="sepalate__box__inner sepalate__inner-box">
      <div class="sepalate__inner-box-catch">
         <img src="https://dummyimage.com/158x158/aaa/fff&amp;text=image" alt="dummy image" class="sepalate__inner-box-catch-img">
      </div>
      <div class="sepalate__inner-box-detail">
         <h3 class="sepalate__inner-box-detail-title">title</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
      </div>
   </div>
</div>

.sepalate__box {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.sepalate__box__inner {
   flex: 1;
   /* 以下任意。*/
   border: 1px solid #333;
   padding: 20px;
   min-height: 100px;
   text-align: center;
}
.sepalate__box__inner + .sepalate__box__inner {
   margin-left: 10px;
}
.sepalate__inner-box {
   display: flex;
   justify-content: space-between;
   /* 以下任意。*/
   text-align: left;
}
.sepalate__inner-box-catch {
   width: 30%;
   text-align: center;
}
.sepalate__inner-box-catch-img {
   width: 100%;
   max-width: 158px;
}
.sepalate__inner-box-detail {
   width: 70%;
   padding-left: 20px;
}
.sepalate__inner-box-detail-title {
   margin-top: 0;
}
@media (max-width: 770px) {
   .sepalate__box {
       flex-direction: column;
   }
   .sepalate__box__inner + .sepalate__box__inner {
       margin-top: 10px;
       margin-left: 0;
   }
}

ちなみに3カラム　デモ：よくこういうデザイン…以下略

<div class="sepalate__box">
   <div class="sepalate__box__inner">item01</div>
   <div class="sepalate__box__inner">item02</div>
   <div class="sepalate__box__inner">item03</div>
</div>

.sepalate__box {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}
.sepalate__box__inner {
   flex: 1;
   /* 以下任意。*/
   border: 1px solid #333;
   padding: 20px;
   min-height: 100px;
   text-align: center;
}
.sepalate__box__inner + .sepalate__box__inner {
   margin-left: 10px;
}
@media (max-width: 770px) {
   .sepalate__box {
       flex-direction: column;
   }
   .sepalate__box__inner + .sepalate__box__inner {
       margin-top: 10px;
       margin-left: 0;
   }
}

4カラムだけど、レスポンシブで2カラムにしろって言われた場合　デモ

<ul class="sepalate__list">
   <li class="sepalate__list__inner">item01</li>
   <li class="sepalate__list__inner">item02</li>
   <li class="sepalate__list__inner">item03</li>
   <li class="sepalate__list__inner">item04</li>
</ul>

.sepalate__list {
   display: flex;
   justify-content: space-between;
}
.sepalate__list__inner {
   width: 24%;
   /* 以下任意。*/
   padding: 5px 20px;
   border: 1px solid #333;
}
@media (max-width: 770px) {
    .sepalate__list {
       flex-wrap: wrap;
   }
   .sepalate__list__inner {
       margin-top: 10px;
       width: 49%;
   }
   .sepalate__list__inner + .sepalate__list__inner {
       margin-left: 0;
   }
   .sepalate__list__inner:nth-child(even) {
       margin-left: 1%;
   }
}

BEMっていったい。。。複雑になるととんでもネーミングになるぅ。

BEMの元祖のYandexのソース見てみた。すげー。マックスでも5単語くらいのつなぎ方やなぁ「media-infinity-footer__part_spacer」とか。。