hiron0424
4/7/2020 - 4:47 AM

flexbox プレフィックス

.flex_box{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;

    -webkit-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -webkit-flex-direction:row;
    -ms-flex-direction:row;
    flex-direction:row;

    -webkit-box-orient:horizontal;
    -webkit-box-direction:reverse;
    -webkit-flex-direction:row-reverse;
    -ms-flex-direction:row-reverse;
    flex-direction:row-reverse;

    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;

    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    -webkit-flex-direction:column-reverse;
    -ms-flex-direction:column-reverse;
    flex-direction:column-reverse;

    -webkit-flex-flow:row-reverse wrap;
    -ms-flex-flow:row-reverse wrap;
    flex-flow:row-reverse wrap;

    -webkit-box-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;

    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;

    -webkit-box-pack:start;
    -webkit-justify-content:flex-start;
    -ms-flex-pack:start;
    justify-content:flex-start;

    -webkit-box-pack:end;
    -webkit-justify-content:flex-end;
    -ms-flex-pack:end;
    justify-content:flex-end;

    -webkit-justify-content:space-around;
    -ms-flex-pack:distribute;
    justify-content:space-around;

    -webkit-box-align:center;
    -webkit-align-items:center;
    -ms-flex-align:center;
    align-items:center;

    -webkit-box-align:start;
    -webkit-align-items:flex-start;
    -ms-flex-align:start;
    align-items:flex-start;

    -webkit-box-align:end;
    -webkit-align-items:flex-end;
    -ms-flex-align:end;
    align-items:flex-end;

    -webkit-box-align:baseline;
    -webkit-align-items:baseline;
    -ms-flex-align:baseline;
    align-items:baseline;

    -webkit-align-content:center;
    -ms-flex-line-pack:center;
    align-content:center;

    -webkit-align-content:flex-start;
    -ms-flex-line-pack:start;
    align-content:flex-start;

    -webkit-align-content:flex-end;
    -ms-flex-line-pack:end;
    align-content:flex-end;
    
    -webkit-align-content:stretch;
    -ms-flex-line-pack:stretch;
    align-content:stretch
}


.flex_item{
    -webkit-box-flex:1;
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
    -ms-flex-order:1;
    order:1;

    -webkit-flex-grow:1;
    -ms-flex-positive:1;
    flex-grow:1;

    -webkit-flex-shrink:1;
    -ms-flex-negative:1;
    flex-shrink:1;

    -webkit-flex-basis:10%;
    -ms-flex-preferred-size:10%;
    flex-basis:10%;

    -webkit-align-self:auto;
    -ms-flex-item-align:auto;
    align-self:auto;

    -webkit-align-self:flex-start;
    -ms-flex-item-align:start;
    align-self:flex-start;

    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center;

    -webkit-align-self:baseline;
    -ms-flex-item-align:baseline;
    align-self:baseline;
    
    -webkit-align-self:stretch;
    -ms-flex-item-align:stretch;
    align-self:stretch
}