boxレイアウト flexbox

1
<script src="<?php echo get_stylesheet_directory_uri(); //flexbox?>/d/js/flexibility.js"></script>
1
2
3
4
5
6
<div class="frex_box">
 
要素
要素
要素
</div>

less

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*フレキシブル 高さ揃える*/
.frex{
    -js-display: flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    }
 
.frex_box{ width:100%;
         .frex;
    justify-content: flex-start;
    flex-wrap:wrap}

ブートcss モバイル

1
.frex_box{ max-width:300px; margin-left:auto; margin-right:auto}

http://liginc.co.jp/web/html-css/css/21024