だら$ちっぷす

仕事の覚書です

flexboxのまとめ

DIVの配置をHTML任せにする場合、避けて通れないflexbox
毎回忘れて1日がかりになってしまうので、ここにまとめておこうと思います


基本。そして最も使うやつ。DIVを横に並べます

<ポイント>
 親のDIVのstyleに追加
  display:flex;   flexboxですよ宣言。こいつの子供は横に並ぶよ

<div style="display:flex; border:solid 1px #008000;">
    <div style="background-color:#ff8888; width:100px; height:50px; margin-left:10px;"></div>
    <div style="background-color:#88ff88; width:100px; height:50px; margin-left:10px;"></div>
    <div style="background-color:#8888ff; width:100px; height:50px; margin-left:10px;"></div>
</div>



あーーーー。文字、真ん中にしたいやん
お任せくださいお嬢様。<( _ _ )彡
これもflexboxでちょちょいのちょいでございます(この後めちゃめちゃ時間食ったw)

<ポイント>
 本人のDIVのstyleに追加
  display:flex;       flexboxですよ宣言
  justify-content: center;  横の真ん中に配置
  align-items: center;    縦の真ん中に配置
  ※横に並べたいから親にもdisplay:flex;をつけてるけど、
   これは本人のセンタリングとは全く関係ないです。

<div style="display:flex; border:solid 1px #008000;align-items: center;">
    <div style="display:flex; justify-content: center; align-items: center; background-color:#ff8888; width:100px; height:50px; margin-left:10px;"></div>
    <div style="display:flex; justify-content: center; align-items: center; background-color:#88ff88; width:100px; height:50px; margin-left:10px;">臨兵闘者</div>
    <div style="display:flex; justify-content: center; align-items: center; background-color:#8888ff; width:100px; height:50px; margin-left:10px;">臨兵闘者皆陣烈在前</div>
</div>


臨兵闘者
臨兵闘者皆陣烈在前


んーーー。。。
display:flex;は、自分の子供に対して配置を指示するやつ、かな?
上記の場合、本人のセンタリングというより、本人の子供である文字列を本人の中にどう配置するか、ですね。
ちょっとわかってきたかなぁ?w


ところで、長い文字列のやつ、左に寄ってるんが気になるんですけどー
これは、flexboxとは違う話になるのですが、いつも躓くとこなので、ここに書いときます

<ポイント>
 本人のDIVのstyleに追加
  text-align:center;     テキストをセンタリングします

<div style="display:flex; border:solid 1px #008000;align-items: center;">
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#ff8888; width:100px; height:50px; margin-left:10px;"></div>
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#88ff88; width:100px; height:50px; margin-left:10px;">臨兵闘者</div>
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#8888ff; width:100px; height:50px; margin-left:10px;">臨兵闘者皆陣烈在前</div>
</div>


臨兵闘者
臨兵闘者皆陣烈在前



意図的に改行を入れたら、もっと自分のイメージに近づきました^^

<div style="display:flex; border:solid 1px #008000;align-items: center;">
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#ff8888; width:100px; height:50px; margin-left:10px;"></div>
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#88ff88; width:100px; height:50px; margin-left:10px;">臨兵闘者</div>
    <div style="text-align:center;display:flex; justify-content: center; align-items: center; background-color:#8888ff; width:100px; height:50px; margin-left:10px;">臨兵闘者<BR>皆陣烈在前</div>
</div>


臨兵闘者
臨兵闘者
皆陣烈在前



次、折返しについて書き留めておこうと、DIVをたくさん並べてみました
紛らわしいので、テキストのセンタリングは無しね。

<div style="display:flex; border:solid 1px #008000;">
    <div style="background-color:#ff8888; width:100px; margin-left:50px;"></div>
    <div style="background-color:#88ff88; width:100px; margin-left:50px;"></div>
    <div style="background-color:#8888ff; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ffaaaa; width:100px; margin-left:50px;"></div>
    <div style="background-color:#aaffaa; width:100px; margin-left:50px;"></div>
    <div style="background-color:#aaaaff; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ffdddd; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ddffdd; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ddddff; width:300px; margin-left:50px;"></div>
</div>



あれれー?おかしいなあ~。端っこで折り返さないで、DIVのwidthを縮めて全部並べようとしてるよー。 しかも、テキストの幅きちきちまで狭めても足りないから、1個はみ出してるしー。

というわけで、折返しの指定です。

<ポイント>
 親のDIVのstyleに追加
  display:flex;    flexboxですよ宣言
  flex-wrap: wrap;  無理やり収めようとせず、折り返す

<div style="display:flex;flex-wrap: wrap;border:solid 1px #008000;">
    <div style="background-color:#ff8888; width:100px; margin-left:50px;"></div>
    <div style="background-color:#88ff88; width:100px; margin-left:50px;"></div>
    <div style="background-color:#8888ff; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ffaaaa; width:100px; margin-left:50px;"></div>
    <div style="background-color:#aaffaa; width:100px; margin-left:50px;"></div>
    <div style="background-color:#aaaaff; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ffdddd; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ddffdd; width:100px; margin-left:50px;"></div>
    <div style="background-color:#ddddff; width:100px; margin-left:50px;"></div>
</div>




で、結局のところ、flexboxって軽くメニュー作るときに一番使うんですよね
サイズかっちり合わせたい時はabsoluteでoffsetLeft,Rightで位置決めするし…
なので、左右に分けて並べたいことが、とても多いです
方法は色々あると思いますが、今んとここれが一番、自分的にわかりやすいです


<ポイント>
 親のDIVのstyleに追加
  display:flex;    flexboxですよ宣言
  justify-content: space-between; 両端を密着させた均等配置にする

 左側の子のDIVのstyleに追加
  display:flex;    flexboxですよ宣言

 右側の子のDIVのstyleに追加
  display:flex;    flexboxですよ宣言
  justify-content: flex-end; 右寄せにする

 それぞれの孫
  それぞれの左側のmargin-left:10px;を抜きました。
  ピタっと合わせたかったんで。

<div style="display:flex; justify-content: space-between; border:solid 1px #008000;">
    <div style="display:flex;">
        <div style="background-color:#ff8888;">前ページ</div>
        <div style="background-color:#88ff88; margin-left:10px;">次ページ</div>
    </div>
    <div style="display:flex; justify-content: flex-end;">
        <div style="background-color:#ff8888;">閉じる</div>
        <div style="background-color:#88ff88; margin-left:10px;">終了</div>
    </div>
</div>


前ページ
次ページ
閉じる
終了



とりあえず、ここまで。また適当に追加するかも。