CSS弹性盒子3

Posted 2020-07-02

@charset "UTF-8";
/* CSS Document */


p{
   width:200px;
   border:5px solid #424089;
   margin:5px;
   padding:5px;
}

div{
    width:100%;
    display:flex;
    
    /*flex-direction:column;
    flex-direction:row-reverse;
    
    flex-wrap:wrap;
    flex-wrap:wrap-reverse;
    
    flex-flow:row wrap;
    
    justify-content:space-around;
    justify-content:flex-start;
    justify-content:center;
    justify-content:space-between;*/

}

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

  }