今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

Flexboxで痛い目にあったのでfloat代わりに使う私的メモ

戦場から離れて隠居してたら、
Flexboxで痛い目にあったのでfloat代わりに使う私的メモです

こういう状態のHTMLをfloat代わりに良い感じに使いたい。
スクリーンショット 2018-08-01 10.04.54.png

samle.html
<ul class="containaer">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
</ul>

<style>
    li{
        width: 120px;
        height: 30px;
        border:1px solid #333;
        list-style: none;
    }
</style>

こいつをまず横並びに

samle.html
<style>
    ul.containaer{
        display: flex;
    }
</style>

なんと親要素に一行で横並びに、、、
スクリーンショット 2018-08-01 10.10.35.png

次はピンクの中に均等に並べたい
スクリーンショット 2018-08-01 10.15.03.png

samle.html
<style>
    ul.containaer{
        display: flex;
     justify-content: space-between;
    }
</style>

justify-content: space-between;

これで均等に!

スクリーンショット 2018-08-01 10.14.14.png

ちなみにFlexboxの「Flex」は「Flexible(柔軟)」の略らしい。。

詳しい説明と対応ブラウザ
https://ajike.github.io/flexbox-tips/

IE11とChromeSafariFirefox

仲直りしようぜ!Flexbox

 

f:id:sudara_bluse:20180619101424p:plain