[CSS Nite LP47] Coder's High 2016

「Good bye ~~ floats and “clearfix” hacks」これからはFlexboxの時代

仕事をしていてテンションが
上がることはなんですか？

少し意地悪なディレクター

横幅も高さも分からないBOX2個並べてさ、
テキストを上下中央に揃えておいてくんね？

あ、さっきのボックスさ
1個かもしれないし、15個かもしれないし、
個数分かんないんだわwwwww
JavaScriptも使わないでね

ちゃちゃっとヨロシクちゃーん

Flexbox で
簡単に構築できます

自己紹介

阿部 正幸（あべ まさゆき）
KDDIウェブコミュニケーションズ
Sublime Text 3 + Gulp

• ACE01 / SmartRelease プロダクトマネージャー
• CPI エバンジェリスト 統括
• KDDIウェブ 公認 CPI スタッフブログ 編集長
• TechAcademy講師
• ANNAI株式会社 社外取締役（CMO）

仕事をしていてテンションが
上がることはなんですか？

私の場合

難しそうなことがちゃちゃっとできたときや、

すごい便利なライブラリを使いこなしたときに

オレ天才!! ってテンションがあがる

翌日には俺、無能って落ち込んでいますけどね......

本日はそんなテンションが上がる

Flexbox

を紹介します

Flexboxとは
CSS Flexible Box Layout Module

対応ブラウザ(Can I Use)

• IE10以降のブラウザから動作する
• Androidは4.4 以降はBlinkベースで動作するが、4.3以下はDraft版の動作となるので、実質動作しない
• CPIフタッフブログ IE9以下の割合：0.7%

Flexboxプロパティ
いくつあると思いますか？

正解は12個です

Flexbox Properties

これだけ覚えたら
複雑なレイアウトが構築できるようになる

こんなレイアウトもラクになる

No scriptのレスポンシブ対応ページネーション
（ソースコード公開します）

こんなレイアウトもラクになる

ドラック＆ロップで順番入れ替え
（ソースコード公開します）

こんなレイアウトもラクになる

高さの違うボックスの下揃え
（ソースコード公開します）

IE8・9対応

https://github.com/jonathantneal/flexibility

<script src="flexibility.js"></script>

.flex-container{
   -js-display: flex;
}

Flex container

<div class="flex-container">
</div>

.flex-container{
   display: flex;
}

「display: flex」を指定した配下がFlex itemになる

<div class="flex-container">
  <div>Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

.flex-container{
   display: flex;
}

Flexbox Properties

flex-direction

Flex container内のitemの並びを縦か横に設定します

DEMO

.flex-container{
	display: flex;
	flex-direction: column;
	/*
		Value: row | row-reverse | column | column-reverse
	*/
}

flex-wrap

Flex container内のitemの折り返しの指定

DEMO

.flex-container{
	display: flex;
	flex-wrap: column;
	/*
		Value:	nowrap | wrap | wrap-reverse
	*/
}

justify-content

横並びの位置を指定

.flex-container{
	display: flex;
	justify-content: flex-end;
	/*
		Value: flex-start | flex-end | center | space-between | space-around
		Initial: flex-start
	*/
}

align-items

縦並びの位置を指定

.flex-container{
	display: flex;
	align-items: flex-end;
	/*
		Value: flex-start | flex-end | center | baseline | stretch
		Initial: stretch
	*/
}

align-content

複数行にまたがった縦並びの位置を指定

.flex-container{
	display: flex;
	align-content: flex-end;
	/*
		Value: flex-start | flex-end | center | space-between | space-around | stretch
		Initial: stretch
	*/
}

order

並びの順番を指定

.flex-container{
	display: flex;
}
.flex-item{
	order:2;
	/*
		Value:	
		Initial:	0
	*/
}

flex

flex-grow、flex-shrink、flex-basisをまとめて指定
各要素の幅を指定

.flex-container{
	display: flex;
}
.flex-item{
	flex:1 0 auto;
	/*
		Initial : flex:0 1 auto;
		flex:auto -> flex:1 1 auto;
		flex:none -> flex: 0 0 auto;
		flex: <positive-number> -> flex: <positive-number> 1 0
	*/

}

align-self

Flex itemの縦並び位置を指定

.flex-container{
	display: flex;
	align-items: flex-end;
	/*
		Value: auto | flex-start | flex-end | center | baseline | stretch
		Initial: auto
	*/
}

Flexboxを活用できるところ

CMS使うと簡単に更新できるんだ

う、うん

できてるけど........

素人が更新しても
かっこよく記事を更新したい

「Flexbox + CMS + WYSIWYG + Template」で、できます

ckeditorの設定を一部変更

ckeditor.config.js

CKEDITOR.editorConfig = function(config) {

  // リプレイスのデフォルト上書きOFF
  config.templates_replaceContent = false;

  // class、IDなどのAttributesを全て許可
  config.allowedContent = true;

  // 一部を許可：h1 class="fuga hoge" 、 p style="text-align:center"
  config.extraAllowedContent = 'h1(fuga,hoge),p{text-align}'

}

DEMO

さいごに

• 未対応のブラウザもあるので、ページ全体の
  レイアウトに使うのではなく、 パーツ単位の利用が
  現状だと無難かも
• FlexboxのDEMOを各ページからダウンロードし、実際に値を変更しどのような動作になるか確認してみよう
• 少し慣れてきたら、今回のデモ用に作成したコードを見てみよう
  プライスリスト
  ページネーション
  ドラック＆ロップで要素入れ替え
  

さいごに２

今日のセミナーを聞いて、やっぱりちゃちゃっと
できるんじゃんwwww って思ったディレクターの皆様へ

圧倒的に忘れてくださいッ!!

Drupal Meetupやっています

5都市で開催（北海道、新潟、東京、大阪、沖縄）

ANNAI - エンジニア募集中 -

• 募集職種
  • フロントエンジニア
  • ソフトウェアエンジニア
• リモートワーク可


北海道、新潟、東京
京都、奈良、大阪、
徳島、沖縄

詳細はwebで !! https://annai.co.jp/recruit

KDDIウェブ - 人材募集中 -

詳細はwebで !!
http://www.kddi-webcommunications.co.jp/recruit

ありがとうございました

• Facebook https://www.facebook.com/chiyo.abe
• Blog http://shared-blog.kddi-web.com/
• Line@ http://line.me/ti/p/@gkv8736o

Special Thanks

• スライド：reveal.js
• 画像：ぱくたそ
• Pagenation source code一部：Responsive Pagination
• Flexboxリファレンス：W3C
• 対応ブラウザ：Can I use