flex

用到flex布局，因为对复合属性的错误使用flex:55;导致在不同商品数下，布局乱掉。
实践的过程中，感觉看似怎么都可以，但需要整体的把握，不能四处尝试，否则效率很低。
以下是demo,实现骰子1~4点，以及垂直布局，中间自适应。比较浅，将继续深入。

<p id="a" class="shazi">
    <p class="dian">点</p>
</p>
<p id="b" class="shazi">
    <p id="b1" class="dian">点</p>
    <p id="b2" class="dian">点</p>
</p>
<p id="c" class="shazi">
    <p id="c1" class="dian">点</p>
    <p id="c2" class="dian">点</p>
    <p id="c3" class="dian">点</p>
</p>
<p id="d" class="shazi">
    <p class="row">
        <p id="d1" class="dian">点</p>
        <p id="d2" class="dian">点</p>
    </p>
    <p class="row">
        <p id="d3" class="dian">点</p>
        <p id="d4" class="dian">点</p>
    </p>
</p>
<p id="add_msg_site">
    <p class="site_add_head">
    </p>
    <section id="J_TabBody" class="body">
    </section>
    <section id="bottom_selections">
    </section>
</p>

.shazi {
    width: 100 px;
    height: 100 px;
    background - color: lightpink;
}

.dian {
    width: 20 px;
    height: 20 px;
    background - color: #FFF;
}

#a {
    display: flex;
    justify - content: center;
    align - items: center;
}

#b {
    display: flex;
    justify - content: space - between;
}

# b1 {}

# b2 {
    align - self: flex - end;
}

# c {
    display: flex;
    //flex-direction:colume-reverse;
    justify - content: space - around;
}

# c1 {}

# c2 {
    align - self: center;
}

# c3 {
    align - self: flex - end;
}

# d {
    display: flex;
    flex - direction: colume;
    flex - wrap: wrap;
    justify - content: space - around;
    align - content: space - around;
}

.row {
    //flex: 1 1 auto;
    width: 100 %;
    display: flex;
    flex - basis: 0 0 100 %;
    justify - content: space - around;
}

# add_msg_site {
    width: 100 %;
    height: 400 px;
    display: flex;
    flex - direction: column;
    border: 1 px solid red;
}

.site_add_head {
    //height: 40px;
    width: 100 %;
    margin: 10 px 0;
    background: yellow;
    flex: 40 px;
}

# J_TabBody {
    width: 100 %;
    height: auto;
    flex: 1 1 auto;
    margin: 0;
    box - shadow: none!important;
    margin - bottom: 5 px;
    background: red;
}

# bottom_selections {
    width: 100 %;
    //height: 135px;
    flex: 135 px;
    background: blue;
}