版本日期:17/09/20

有問題請指出

/**彈性父元素屬性**/
.flex {
    display: box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/*flex 屬性用於指定彈性子元素如何分配空間。*/
.flex .f1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex
 
: 1;
    flex: 1;
}
.flex .f2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}
.flex .f3 {flex:3;}

/*flex-direction 順序指定了彈性子元素在父容器中的位置。*/
.fd-r {flex-direction: row;}
.fd-rr {flex-direction: row-reverse;}
.fd-c {
    -webkit-box-orient: vertical;
    -webkit-flex-direction
 
: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
}
.fd-cr {flex-direction: column-reverse;}

/*內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。*/
.jc-fs {justify-content: flex-start;}
.jc-fe {justify-content
 
: flex-end;}
.jc-c {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}
.jc-sb {justify-content: space-between;}
.jc-sa {justify-content: space-around;}

/*align-items 設置或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。*/
.ai-fs {align-items: flex-start;}
.ai-fe {align-items: flex-end;}
.ai-c {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
}
.ai-b {align-items: baseline;}
.ai-s {align-items: stretch;}

/*flex-wrap 屬性用於指定彈性盒子的子元素換行方式。*/
.fw-nw {flex-wrap:nowrap;} /*默認， 彈性容器為單行。該情況下彈性子項可能會溢出容器。*/
.fw-w {flex-wrap:wrap ;}
.fw-nw {flex-wrap:wrap-reverse;} /*反轉 wrap 排列。*/

/*align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。*/
.ac-s {align-content: stretch;}
.ac-fs {align-content: flex-start;}
.ac-fe {align-content: flex-end;}
.ac-c {align-content: center;}
.ac-sb {align-content: space-between;}
.ac-sa {align-content: space-around;}

/*排序 order <integer>：用整數值來定義排列順序，數值小的排在前面。可以為負值。*/
.flex .order-1 {order: 1;}
.flex .order-2 {order: 2;}
.flex .order-3 {order: 3;}

/*align-self 屬性用於設置彈性元素自身在側軸（縱軸）方向上的對齊方式。*/
.as-a {align-self:auto;}
.as-fs {align-self:flex-start;}
.as-fe {align-self:flex-end;}
.as-c {align-self:center;}
.as-b {align-self:baseline;}
.as-s {align-self:stretch;}


.margin-auto{
    margin: auto;
}

新舊彈性盒 樣式