CSS3弹性伸缩布局（下）——flex布局

//HTML代码部分
<div>
        <p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
        <p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
        <p>我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林我是吴广林</p>
    </div>

//CSS部分
p{
    width:150px;
    margin:5px;
    padding: 5px;
    border: 1px solid gray;
    background: silver;
}

div{
    display: flex;
}

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

flex-flow:row wrap;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

p:nth-child(1){
    align-self: center;
}

p:nth-child(1){
    flex: 1;
}
p:nth-child(2){
    flex: 2;
}
p:nth-child(3){
    flex: 1;
}

p:nth-child(1){
    flex: 1;
    order: 3;
}
p:nth-child(2){
    flex: 2;
    order: 1;
}
p:nth-child(3){
    flex: 1;
    order: 2;
}