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

kmasdaの日記

rubyとかrailsとかそれっぽいことを

普段デザインとかからっきしな自分がflex使ってちょっと光が見えた時の備忘録

CSS

日頃デザインなどしないのでcss調整とかなってくると腰が重い。 で、

blog.jnito.com

なんかflexすごそう。 デザイナーじゃないけど最低限これぐらいは押さえておこうと思ってた自分にズッポリ刺さる内容!

他にも色々使えそうなテクニックあってcss実は食わず嫌いしてた感じもしてきた。 細かいプロパティとかは A Complete Guide to Flexbox | CSS-Tricks が分かりやすいからあくまでメモ的な感じで書く。

使い方

.container {
  display: flex; /* or inline-flex */
}

これで構造とその子要素に対して何かしらできる。 で、containerとitemsに分けて考えると理解しやすい。

containerに対してあれこれするやつ

flex-direction

子要素の配置を指定できる。

  • row(default)
  • row-reverse
  • column
  • column-reverse

flex-wrap

要素の中身をwrapするかどうか見たいなfloat的なやつ

  • nowrap(default)
  • wrap
  • wrap-reverse

flex-flow

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

みたいな感じでまとめて書ける。

justify-content

子要素を横軸に対してどのように配置するか

  • flex-start(default)
  • flex-end
  • space-between ※両端に来る子要素にスペースが空いてない。その上で中の子要素同士のスペースが均等になるように配置する
  • space-around ※要素同士のスペースが均等で且つ、両端にスペースが入る。

align-items

子要素縦軸に対してどのように配置するか

  • flex-start
  • flex-end
  • center
  • stretch(default)
  • baseline ※子要素の中の基準

align-content

itemsに対してなんかするやつ

order

子要素の順番を決めれる。

flex-grow

子要素の割合を規定できる。 指定すると指定されていないそれ以外の要素を1として計算される。

frex-shrink

flex-basis

flex

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-flowみたいな感じでまとめて指定できる。

align-self

その要素のみ適用させるときに使う。

参考にしたサイト

css-tricks.com

flexboxfroggy.com 最後の問題ができない。誰か教えてケロ。 できた!!!なるほどって感じ。よかったらやってみてください。 f:id:kmasda:20160225230704p:plain

・当分css関連の記事が増えそう ・netflixのテラスハウスはまった。副音声がご馳走。