flex 常見用法終極版

相信大家都體驗過 flex 佈局的強大。這裏是flex的常見的用法集合。

可能剛開始會不習慣這種複雜的命名，但是如果適應了，就會覺得很好用，指數級提高開發效率。

一般建議在項目全局引入。

下面分別列出了純css版本，還有sass版本，大家也可以根據項目的需求，進行刪減和增加。

用法說明:

// .flex flex容器默認水平流方向
// .flecol flex容器垂直流方向
// .flex-v-center 相對於外容器呈一行垂直居中，水平居左
// .flexcol-h-center 相對外容器呈列垂直底部對齊，水平居中
// .flexcol-v-center 相對外容器呈列垂直居中，水平居左
// .flex-h-center 相對於外容器呈一行垂直頂部對齊，水平居中
// .flex-justify-v-center 伸縮項目相對外容器呈一行垂直居中，水平兩端對齊
// .flex-h-justify 相對於外容器一行垂直頂部對齊，水平兩端對齊
// .flex-v-end 相對於外容器呈一行垂直底部對齊，水平居左
// .flex-end-v-center 伸縮項目相對外容器呈一行垂直居中，水平居右
// .flex-all-center 相對外容器呈一行垂直居中，水平居中
// .flexcol-all-center 相對外容器呈列垂直居中，水平居中
// .flexcol-justify-h-center 伸縮項目相對外容器呈列垂直兩端對齊，水平居中
// .flexcol-justify 伸縮項目相對外容器呈列垂直兩端對齊，水平居左

css版本：

/**
 *  flex彈性佈局
 */
.flex,
.flex-v-center,
.flex-h-center,
.flex-h-justify,
.flex-v-end,
.flex-justify-v-center,
.flex-end-v-center,
.flex-all-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
}

[class*='flexcol'] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
      flex-direction: column; 
}

.flex-v-center,
.flex-justify-v-center,
.flex-end-v-center,
.flexcol-h-center,
.flexcol-justify-h-center,
.flex-all-center,
.flexcol-all-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
      align-items: center; 
}

.flex-h-center,
.flexcol-v-center,
.flex-all-center,
.flexcol-all-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
      justify-content: center; 
}

.flex-v-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
      align-items: flex-end; 
}

.flex-h-justify,
.flex-justify-v-center,
.flexcol-justify {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
      justify-content: space-between; 
}

.flex-end-v-center {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
      justify-content: flex-end; 
}

.flex-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
      flex: 1;
  width: 0%; 
}

sass版本：

/**
 *  flex彈性佈局
 */

// flexible容器初始化
@mixin flex() {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
// 內聯flex容器
@mixin inline-flex() {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}
// 伸縮流垂直方向
@mixin flex-direction-column() {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
}
// 主軸兩端對齊
@mixin flex-main-justify() {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
// 主軸元素均勻分佈，兩端保留子元素與子元素之間間距大小的一半
@mixin flex-main-around() {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
// 主軸中間對齊
@mixin flex-main-center() {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
// 主軸底部對齊
@mixin flex-main-end() {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
// 側軸居中對齊
@mixin flex-cross-center() {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
// 側軸頂邊對齊
@mixin flex-cross-start() {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
// 側軸底部對齊
@mixin flex-cross-end() {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
// 側軸基線對齊
@mixin flex-cross-baseline() {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}
// 給伸縮項目賦予自由伸縮的能力
@mixin flex-item() {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  width: 0%;
}
@mixin flex-auto() {
  -webkit-box-flex:1;
  -webkit-flex:auto;
  flex:auto;
}

// .flex flex容器默認水平流方向
// .flecol flex容器垂直流方向
// .flex-v-center 相對於外容器呈一行垂直居中，水平居左
// .flexcol-h-center 相對外容器呈列垂直底部對齊，水平居中
// .flexcol-v-center 相對外容器呈列垂直居中，水平居左
// .flex-h-center 相對於外容器呈一行垂直頂部對齊，水平居中
// .flex-justify-v-center 伸縮項目相對外容器呈一行垂直居中，水平兩端對齊
// .flex-h-justify 相對於外容器一行垂直頂部對齊，水平兩端對齊
// .flex-v-end 相對於外容器呈一行垂直底部對齊，水平居左
// .flex-end-v-center 伸縮項目相對外容器呈一行垂直居中，水平居右
// .flex-all-center 相對外容器呈一行垂直居中，水平居中
// .flexcol-all-center 相對外容器呈列垂直居中，水平居中
// .flexcol-justify-h-center 伸縮項目相對外容器呈列垂直兩端對齊，水平居中
// .flexcol-justify 伸縮項目相對外容器呈列垂直兩端對齊，水平居左

// flex容器默認水平流方向共同樣式
.flex,
.flex-v-center,
.flex-h-center,
.flex-h-justify,
.flex-v-end,
.flex-justify-v-center,
.flex-end-v-center,
.flex-all-center {
  @include flex();
}
// flex容器垂直流方向共同樣式
[class*='flexcol'] {
  @include flex();
  @include flex-direction-column();
}

.flex-v-center,
.flex-justify-v-center,
.flex-end-v-center,
.flexcol-h-center,
.flexcol-justify-h-center,
.flex-all-center,
.flexcol-all-center {
  @include flex-cross-center();
}

.flex-h-center,
.flexcol-v-center,
.flex-all-center,
.flexcol-all-center {
  @include flex-main-center();
}

.flex-v-end {
  @include flex-cross-end();
}

.flex-h-justify,
.flex-justify-v-center,
.flexcol-justify {
  @include flex-main-justify();
}

.flex-end-v-center {
  @include flex-main-end();
}

// 作用於伸縮項目，均分剩餘空間
.flex-item {
  @include flex-item();
}