flex布局

1

<p class="aa">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>                                
</p>
 -------------------------------------------------------------
<style>
.aa{
    /* 父元素添加flex，可控制子元素布局 */
    display: flex;
    /* 主轴方向 */
    flex-direction: row;
    /* 主轴子元素排序 */
    justify-content: center;
    /* 主轴子元素换行 */
    flex-wrap: wrap;
    /* 侧轴子元素排序（单行生效） */
    /* align-items: center; */
    /* 侧轴子元素排序（换行生效） */
    align-content: center;
    background: red;
    width: 162px;
    height: 162px;
}
.aa span{
    width: 40px;
    height: 40px;
    background: green;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid yellow;
}
</style>

2

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
 </p>   
 -------------------------------------------------------------
 <style>
    p {
        display: flex;
        width: 100px;
        height: 100px;
    }
    
    p span {
        /* 子元素从父元素的剩余空间分配份数 */
        flex: 1;
        background: green;
    }
    
    p span:nth-child(2) {
        flex: 2;
        background: yellow;
    }

    p span:nth-child(3) {
        flex: 2;
        background: red;
    }
    </style>

3

<p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
 </p>   
 -------------------------------------------------------------
<style>
p {
    display: flex;
    /* 侧轴排序：常规的全部下来 */
    /* align-items: flex-end; */
    width: 100px;
    height: 100px;
    background: red;
}

p span {
    width: 30px;
    height: 30px;
    background: green;
}

p span:nth-child(2) {
    /* 控制某个子元素，排列顺序，越小越靠前 */
    order: -1
}

p span:nth-child(3) {
    /* 侧轴排序：可以控制某一个子元素排序 */
    align-self: flex-end;
}
</style>