flex子项属性使用(flex/align-self)

flex`属性定义子项分配剩余空间，用flex来表示占多少份数。

.item {
	flex:<number>; /* default0 默认0 */
}

section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        } 
        section div:nth-child(2 ) {
            flex: 1;
            background-color: green;
        } 
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        } 
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        p span {
            flex:1
        }
        .p1 {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        .p1 span:nth-child(2) {
            flex: 2;
            background-color: purple;
        }

<section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
    <p class="p1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>

align-self控制子项自己在侧轴上的排列方式

order属性定义项目的排列顺序

div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
        }
        /* 数值越小，排列越靠前，默认为0，和z-index不一样。 */
        div span:nth-child(2) {
            order: -1;
        }
        /* 控制3号盒子改变 */
        div span:nth-child(3){
            align-self: flex-end;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

<div>
       <span>1</span>
       <span>2</span>
       <span>3</span>
   </div>

标签：flex,color,align,子项,height,width,background,div
来源： https://www.cnblogs.com/tallish/p/15349638.html