flexbox示例1——骰子布局

基础样式css设置：

<style>
        .box{
    
            width: 900px;
            height: 900px;
            margin: 0 auto;
            background: silver;
        }
        .item{
    
            width: 300px;
            height: 300px;
            background: black;
            font-size: 50px;
            font-weight: bold;
            line-height: 300px;
            text-align: center;
            border-radius: 50%;
            color: white;
        }
</style>

单项目布局：控制好单个项目的位置。

html：

    <div class="box">
        <div class="item">item</div>
    </div>

css：

    <style>
        /* 控制好行列位置（两端与居中） */
        /* 1 */
        /* .box{
            display: flex;
        } */
        /* 2 */
        /* .box{
            display: flex;
            justify-content: center;
        } */
        /* 3 */
        /* .box{
            display: flex;
            flex-direction:row-reverse
        } */
        /* 4 */
        /* .box{
            display: flex;
            flex-direction:column;
            justify-content: center;
        } */
        /* 5 */
        /* .box{
            display: flex;
            justify-content: center;
            align-items: center;           
        } */
        /* 6 */
        /* .box{
            display: flex;
            flex-direction: row-reverse;
            align-items: center;           
        } */
        /* 7 */
        /* .box{
            display: flex;
            flex-direction: column-reverse;
        } */
        /* 8 */
        /* .box{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        } */
        /* 9 */
        /* .box{
            display: flex;
            flex-direction: row-reverse;
            align-items: flex-end;
        } */