[CSS3]Boxレイアウト(方向と改行)

by tea4two

HTML

<meta name="viewport" content="width=700"/>

<ul>
    <li id="box1">1.主任（一番弱い）</li>
    <li id="box2">2.係長</li>
    <li id="box3">3.課長</li>
    <li id="box4">4.次長</li>
    <li id="box5">5.長官（一番強い）</li>
</ul>

CSS

ul {
    list-style: none;
    margin: 0;padding: 0;
    border: 1px dashed lightblue;
    /* box -> flexの順で書く(後のが効くので) */
    display: box;
    display: -ms-box;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    
    /* 方向
    flex-direction: row;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    box-direction: reverse;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;*/
    
    /* 改行(boxに相当するものは無し) */
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    
    /* 方向と改行をまとめて */
    flex-flow: row-reverse wrap;
    -webkit-flex-flow: row-reverse wrap;
    
}

li {
    width: 120px;
    font-weight: bold;
    text-align: center;
}
#box1 {background: yellow; }
#box2 {background: lightblue;}
#box3 {background: pink; }
#box4 {background: lightgreen; }
#box5 {background: gray; }

JavaScript

: