flex 常见用法终极版

相信大家都体验过 flex 布局的强大。这里是flex的常见的用法集合。

可能刚开始会不习惯这种复杂的命名，但是如果适应了，就会觉得很好用，指数级提高开发效率。

一般建议在项目全局引入。

下面分别列出了纯css版本，还有sass版本，大家也可以根据项目的需求，进行删减和增加。

演示链接

http://userkang.com/html-css-js/flex.html

如果你想快速找到自己需要的布局方式，可以直接在演示页面查看源码。部分demo页面截图如下：

用法说明:

// .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;
}

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;
}
@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();
}