Webデザイン今回は「flex-grow」「flex-shrink」「flex-basis」3つと「flex」ショートハンドについてやってみようと思います。//今回は全体の幅を1000pxとしました。//今回は全体の幅を1000pxとしました。}とすることで3カラムのレイアウトはできます。Flexboxのいいところは内容量の違うboxが並んでも、高さを揃えてくれるところにあります。デザインのよって高さを揃えなきゃいけないときには便利です。flex-growプロパティflex-growプロパティはflexアイテムの伸び率を設定することができるプロパティで数字で指定します。flexコンテナ内にflexアイテムが入っています。内容が少なくてflexコンテナに余りが出る場合でもflaxアイテムが自動的に伸びて余白を埋めてくれます。その自動的に伸びる伸び率を指定できるのが「flex-grow」プロパティです。1;}とするとと均等にレイアウトされます。flex-shrinkプロパティflex-shrinkプロパティはflexアイテムの縮む倍率を指定するプロパティで数字で指定します。「flex-wrap:nowrap;」と同時にしていしないと無視されます。(「flex-wrap:nowrap;」は初期値なので特に設定する必要はありません。2;}ここではわざとflexアイテムの幅を500pxにしてflexコンテナをはみ出す設定しています。そこでColumn1だけに「flex-shrink:2;」を指定すると縮む倍率が他の2つのflexアイテムより2倍になります。0.75(75%)よって25%の縮率となります。Column3も同様。Column1は倍の50%の縮率となり、結果250pxとなります。ややこしいですが・・・flex-basisプロパティflex-basisプロパティはwidthプロパティやheightプロパティと同じです。「flex-direction」プロパティが「row」「row-reverse」のときは幅となり、「column」「column-reverse」のときは高さとなり単位付きの数字で指定します。200px;}このように指定すると全体の幅は関係なく200pxづつで納まります。この3つのプロパティをまとめて指定できるのがショートハンドの「flex」になります。50%;]単位なしの値を2つ指定するとflex-growとflex-shrinkとなります。まとめ色々やってみましたけど要はflaxプロパティを覚えておけば大丈夫ですね。Designer」を試してみた。操作はFLA...記事を読む[CSS]同じサイズのボックスを横並びにするときのコツネガティブマージンってイヤですね下山です。写真のサムネイルを並べてクリックで拡大とかよくやるじゃないですか!やるじゃないです...記事を読む[CSS]liをfloatして横に並べてそれを中央配置にするオレ的まとめもうタイトルが何言ってるか分からないですが読んだ通りですはい。いや、説明するとliをfloat:leftすると左揃えになってしまうも...記事を読む[Compass,CSS3]CompassのCSS3モジュールをまとめてみた(2)予定は未定でしたが2度めの更新ですよ。今回は「あ~見たことある~」的なところでいくつかピックアップしてみました。tr...記事を読む[Sass,@extend]Sassの@extendの使い方。@mixinとどう区別したらいいのか分からない!って人もヒントになればいいと思うよ!てか...記事を読む[CSS]そろそろFlexboxをまとめてみるIE10のシェアも全体の1%を切ったということで、そろそろガンガンFlexbox使ってもいいかなと思ったり思わなかったり。言うことでliを横並びにした角丸なナビゲーションを作ってみました。若干、500回...記事を読む[CSS,エディター]brackets-cssfierがどんなものか使ってみた(インストール方法とか)Sassネタは今日はお休みしてbrackets-cssfierが気になったので使ってみました。感想やら手順などをちょこっと。ちょこっ...記事を読む[スマホサイト]スマホサイトのナビゲーションを考える最近のサイトはスマホサイトあって当たり前な流れが定着してきましたが、なかなかスタンダードなデザインが見出だせなくて奮闘しております。