CSS3のFlexboxを使ってみました

2016年11月7日 | News, Web

今までBootstrapを使っていた為、Flexboxには手を出していませんでしたが、クリエイターの方がFlexboxについての記事を多く掲載されていらっしゃるので興味がわいて練習に記事出力用のカラムを作ってみました。高さがバラバラでもデフォルトで高さを一番高い場所に合わせてくれるんですね!!おかげで2段目の列も崩れないし、率直な感想として「便利」「使えそう」です。

それでは早速ソースを掲載していきます。下にはCodepenも埋め込んでおります。ソースは、使えそうであればコピペしてご自由にお使いください。

[html]

<section class="wrapper">
<div class="col-3">
<a href="#"><img src="https://placehold.jp/370×200.png" 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>,<a href="">news</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round">Read More</a>
</div>
</div>
<div class="col-3">
<a href="#"><img src="https://placehold.jp/370×200.png" 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>,<a href="">news</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round">Read More</a>
</div>
</div>
<div class="col-3">

<a href="#"><img src="https://placehold.jp/370×200.png" 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>,<a href="">news</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round">Read More</a>
</div>
</div>
<div class="col-3">
<a href="#"><img src="https://placehold.jp/370×200.png" 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>,<a href="">news</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round">Read More</a>
</div>
</div>
<div class="col-3">
<a href="#"><img src="https://placehold.jp/370×200.png" 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>,<a href="">news</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round">Read More</a>
</div>
</div>
<div class="col-3">

</section>

[/html]

ここからCSS　↓↓

※CSSコードの194行目calc(33.3% – 30px)を25%などにすると3カラムから4カラムに変更できます。数値を変える事で簡単に5カラム6カラムと変更できますので、ぜひ試してみてください。

[css]

*, *:after, *:before {
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;

}

html, body {
font-family: "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;
margin: 0;
padding: 0;
}

body {
background-color: #f8f8f8;
}

a {
color: #222;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

img {
max-width: 100%;
}

.col-3 {

}

.col-3 h1 {
font-weight: normal;
text-align: center;
font-size: 1.2rem;
padding: 5px;
}

.col-3 p {
padding: 0;
font-size: 14px;
}

.col-3 img {
width: 100%;
}

/* Flexbox レイアウト */

.wrapper {
display: flex;
flex-wrap: wrap;
padding: 10px 0;
width: 1200px;
margin: 0 auto;

}

.wrapper div.col-3 {
width: calc(33.3% – 30px);
margin: 15px 15px 30px 15px;

}

/* title borderline */

.border_line {
width: 100%;
margin: 0 auto;
padding: 0;

}

.border_line .title_text{
font-size: 20px;
padding: 0;
margin: 10px 0;
font-weight: 100;
}

.title .title_text {
position: relative;
padding-bottom: .5em;
}
.title .title_text::before,
.title .title_text::after {
position: absolute;
bottom: 3px;
left: 0;
content: ”;
height: 2px;
}
.title .title_text::before {
z-index: 2;
width: 20%;
background-color: #3498db;
}
.title .title_text::after {
width: 100%;
-webkit-background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}
/* time and category */
.post-prev-info,
.post-prev-info a{
margin-bottom: 15px;
font-size: 11px;
text-decoration: none;
color: #aaa;

-webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.post-prev-info a:hover{
color: #111;
}
/* botton */
.btn-mod,
a.btn-mod{

padding: 4px 13px;
color: #fff;
background: rgba(34,34,34, .9);
border: 2px solid transparent;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;

-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;

-webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.btn-mod.btn-gray{
color: #777;
background: #e5e5e5;
}
.btn-mod.btn-gray:hover,
.btn-mod.btn-gray:focus{
color: #444;
background: #d5d5d5;
}

.btn-mod.btn-round{
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

/* Responsive */

@media screen and (max-width:900px) {
ul {
display: flex;
}
.wrapper div.col-3 {
width: calc(33.3% – 10px);
margin: 5px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 10px;
}
}
@media screen and (max-width:768px) {
ul {
display: flex;
}
.wrapper div.col-3 {
width: calc(33.3% – 30px);
margin: 15px 15px 30px 15px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 10px;
}
}
@media screen and (max-width:480px) {
ul {
flex-direction:column;
margin: 0;
padding: 0;
}
ul {

margin: 0 !important;
padding: 0 !important;
}
.wrapper div.col-3 {
width: 100%;
margin: 15px 15px 30px 15px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 10px;
}
}

[/css]

Codepenを埋め込んでおりますので、実際の動作などご確認ください。

See the Pen Flex box3カラム by mitsuox (@puzz) on CodePen.

まとめ

多くのクリエイターさんが記事で「便利だ」と掲載されていた通り、とても使い勝手の良いフレキシブルボックスでした。仕様がころころ変わったりと、イマイチ一歩踏み出せない感がありましたが、ようやくモダンブラウザーでの使用が可能になり、これから多く目にする機会が増えそうです。個人的には、もう少し使い込んで実践で使用していきたいと思っています。

アイキャッチにキャプションを出力する方法

【BLACK FRIDAY】企画詳細