だら＄ちっぷす

仕事の覚書です

flexboxのまとめ

css

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


基本。そして最も使うやつ。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でちょちょいのちょいでございます（この後めちゃめちゃ時間食ったｗ）

＜ポイント＞
　本人の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;は、自分の子供に対して配置を指示するやつ、かな？
上記の場合、本人のセンタリングというより、本人の子供である文字列を本人の中にどう配置するか、ですね。
ちょっとわかってきたかなぁ？ｗ


ところで、長い文字列のやつ、左に寄ってるんが気になるんですけどー
これは、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を縮めて全部並べようとしてるよー。 しかも、テキストの幅きちきちまで狭めても足りないから、１個はみ出してるしー。

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

＜ポイント＞
　親の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>


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



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