flexboxでブログ出力3カラム作成

2017年1月15日 | Web

前にCSS3のFlexboxを使ってみましたという記事を掲載させて頂きましたが、今回はこちらのページを参考にさせて頂き発火ポイントにスクロールが達するとjQueryが作動しカラムが順にフェードインしてくるエフェクトを追加しました。デモページも用意していますので、動作チェック確認いただけます。

HTMLは下記


<section class="wrapper" id="scroll">

    <div class="col-3 scroll_in">
    <a href="#"><img src="images/top7.jpg" alt=""></a>
      <section class="title border_line">
       <h2 class="title_text">このタイトルはダミーです。</h2>
      </section>
      <div class="post-prev-info font-alt">
        <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
      </div>
       <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
       <div class="post-prev-more">
         <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
        </div>
  </div>
  <div class="col-3 scroll_in">
   <a href="#"><img src="images/top8.jpg" alt=""></a>
     <section class="title border_line">
       <h2 class="title_text">このタイトルはダミーです。</h2>
</section>
     <div class="post-prev-info font-alt">
        <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
      </div>
      <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
       <div class="post-prev-more">
         <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
       </div>
  </div>
  <div class="col-3 scroll_in">
    
    <a href="#"><img src="images/top9.jpg" alt=""></a>
     <section class="title border_line">
       <h2 class="title_text">このタイトルはダミーです。タイトルが2行になっても大丈夫！！</h2>
</section>
     <div class="post-prev-info font-alt">
        <time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
      </div>
    <p>この文章はダミーです。文字の大きさ、量、字間、行間等を</p>
     <div class="post-prev-more">
         <a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
     </div>
  </div>


</section>

CSSは下記


  .wrapper {
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari */
    flex-wrap: wrap;
    -webkit-justify-content:space-between;/*--- safari ---*/
    justify-content: space-between;
    padding: 0 0;
    width: 1200px;
    margin: 0 auto;
    
  }
  .wrapper div.col-3 {
    width: calc(33.3% - 30px);
     
  }

  @media screen and (max-width:768px) {
 
  .wrapper div.col-3 {
    width: calc(33.3% - 10px);
    margin: 5px;
  }
  .wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 10px;
  }
}
  @media screen and (max-width:480px) {
 
  .wrapper div.col-3 {
    width: 100%;
    margin: 0 0 20px;
  }
  .wrapper div.col-3.infor_link{
	  width: calc(33.3% - 10px);
       margin: 5px; 
  }
  .wrapper {  
    width: 100%;
    margin: 0 auto;
    padding: 10px;
  }
 }

demo