hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

flex memo

flex box の書き方がだいぶ変わっている様なので2014.5.13現在の書き方メモメモ
[css]

.pageNavi{
display: -webkit-box; ///* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; ///* OLD – Firefox 19- (buggy but mostly works) */
display: -webkit-flex; ///* NEW – Chrome */
display: flex; ///* NEW, Spec – Opera 12.1, Firefox 20+ */
}
li{
-webkit-box-flex: 1; ///* OLD – iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; ///* OLD – Firefox 19- */
width: 40%; ///* For old syntax, otherwise collapses. */
-webkit-flex: 1; ///* Chrome */
flex: 1; ///* NEW, Spec – Opera 12.1, Firefox 20+ */

-webkit-align-self: center;
align-self: center;

font-size: fz(28);
}
[/css]
Using Flexbox: Mixing Old and New for the Best Browser Support | CSS-Tricks :

Using Flexbox: Mixing Old and New for the Best Browser Support

align-self

追記☆
今こそ未来!CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG : http://liginc.co.jp/web/html-css/css/21024


投稿日

カテゴリー:

,

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください