＼ にゃんぱす～ ／
どうも、私の身体は働く細胞BLACKことDJよろずやです。
久しぶりのスタッフコラムのため、今までどんな風に書いてたか覚えていません。
何を書いていたかすら覚えていないので、自分の記事を読み返す辱めを受けました。
DJよろずやちゃんはしれっと目の色変えたりアイライン入れたり、ネイル塗ったりなどなど、ブラッシュアップしてみました。うん、かわいい。かわいいよ私。
皆も使おうVroid studio。
ご報告するような近況はあまりないのですが、最近はもっぱらAPEX Legendばかりやっています。
一日の大半はAPEXです。みんなもやろうAPEX。
PC(steam/origin)、PS4/5でプレイ可能で、3/9からswitch版もリリースします！！
今シーズンこそはダイヤになるぞーーーー！！！
閑話休題
みなさん、flex多用していますか？私はしていますよ。もちろん。
flexの魔術師ことDJよろずやです。
人生の半分はflexでできているといっても過言ではありません。
もう半分はapexでできています。
それ以外の構成要素は微塵もありません。
そんなflexの魔術師は今回も引き続きflexについて紹介していきます。
ネタが思いつかなかったわけではなく、シリーズ化しているだけです。
そのあたり勘違いしないように。
はい、拍手。👏
flex小技集 其ノ参
今回は覚えておくとCSSの記述量が究極に減るし、色んなレイアウトに対応可能になる魔法をお教えしたいと思います。
追加するのはたった1行！
htmlの順番なんて無視！
自分の理想の見た目にしてみましょう！
※flexの親子関係であることが条件
flex-directionとorder
順序を指定するものは
- flex-direction
- order
の2種類が存在します。
何が違うかというと、
| flex-direction | 親要素に指定する。 子要素(フレックスアイテム)を横並びにするか、縦並びにするか、逆方向横並びにするか、逆方向縦並びにするかを指定する。 |
| order | 子要素に指定する。 指定した順番に要素が入れ替わる。 |
と、そもそも親要素に書くか子要素に書くかが違います。
実際に書いてみるとこうなります。
flex-direction
親要素にflex-directionを書くことで子要素の並び順・並び方を指定することができます。
特になにも書いていない時は、flex-direction: rowがデフォルトの設定になります。
rowが横並び
row-reverseが逆方向横並び
columnが縦並び
column-reverseが逆方向縦並び
となります。
order
flex-directionはあくまで並び方(横並び・縦並び)を指定するものなので、応用として、縦か横かを指定した後に、子要素(フレックス)アイテムにorderを記述することで、何番目に配置したいかを指定することができます。
数字が小さいほど先に表示し、マイナスの値を指定することはできません。
おわりに
いかがだったぺこか。(某うさぎ)
やっぱflexしか勝たん👊というのは揺るぎない事実だったわけで。
CSSが進化することで簡略化や新しいレイアウトの実装が簡単になってきていますが、ブラウザが対応してくれないと使用できないというのがなかなかモヤモヤするところです。
私はIEとSafariは許さない協会の会長なので、Chromeしか存在しない世の中になってほしいといつも思っています。
それではまたいつか✋