読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

display:flexがモバイルで効かないときはdisplay:boxで代用する

CSS Javascript AngularJS

真木よう子Viewer ver1.01

f:id:naoyashiga:20140519201042p:plain
先日のエントリに引き続き「真木よう子Viewer」を作っていました。AngularJSの恩恵を十分に受けていないようなペラ一枚のページになっています・・・。

orderByでソートする

<li ng-repeat="makiYoko in makiYokos | orderBy:'-score'" ng-controller="makiYokoItemCtrl">
	<img ng-src="{{makiYoko.url}}" ng-class="'makiImg'">
	<button ng-click="increment()">{{makiYoko.score}}</button>
</li>

「-score」というように先頭にマイナスをつけることによって、scoreが大きい順に並べています。ボタンを押して、数値をアップさせれば、順番が変わります。

Google Web Fontsを使う

タイトルは「Josefin Sans」というフォントにしました。字体は細めです。
https://www.google.com/fonts/specimen/Josefin+Sans

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:300' rel='stylesheet' type='text/css'>

htmlにWeb Fontsを読み込みます。

header{
	width:80%;
	margin:0 auto;
	text-align:center;
	font-family: 'Josefin Sans', sans-serif;
}

html5から採用されたheaderタグにフォントを指定しました。

display:flexはモバイルで動かない?

タブレットでページを見ると「display:flex」が効いていませんでした。

.makiImgLayout{
	display:-webkit-box;
	display:-moz-box;
	display:box;
	display:-webkit-flex;
	display:flex;

	-moz-box-orient:horizontal;
	-webkit-box-orient:horizontal;
	flex-direction:row;

	-ms-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-webkit-flex-wrap:wrap;
	flex-wrap:wrap;

	-moz-box-pack:justify;
	-ms-box-pack:justify;
	box-pack:justify;
	flex-pack:justify;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	/*
	justify-content:space-around;
	*/
}

旧仕様である「display:box」を追加して書くことにしました。
flexboxの旧仕様、改定仕様、現行仕様の一覧 « LINE Engineers' Blog


f:id:naoyashiga:20140519205755j:plain
タブレットで見るとこんな感じでした。横向きにすると横幅が広くなるので、応じてレイアウトが変わります。レイアウトの変わり方をスムーズにしたら良いかもしれません。