Cacher is the code snippet organizer for pro developers

.nav {
    width: 300px;
    height: 100px;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
}
.nav2 {
    width: 100px;
    height: 300px;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
.nav div, .nav2 div {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    text-align: center;
    line-height: 100px;
    font-size: 36px;
    color: #fff;
}

.box1 {
    background: #1abc9c
}
.box2 {
    background: #3498db
}
.box3 {
    background: #9b59b6
}
.box4 {
    background: #f39c12
}
.box5 {
    background: #27ae60
}
.box6 {
    background: #c0392b
}

<!-- 横向排列 -->
<div class="nav">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</div>
<!-- 纵向排列 -->
<div class="nav2">
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
</div>

_