更多
更多
文章目录
  1. Flex布局是什么？
  2. 容器属性（被flex的元素属性）
  3. 项目属性（flex容器中子元素属性）
  4. flex布局的兼容性

移动端之Flexbox布局

2017.07.07 chen7 移动端  热度 ℃

移动端布局早有接触，真的是一个很方便的一个布局方式，但前几次的使用中兼容性问题用得不是很愉快，但自动构建工具里的前缀补全插件勉强又给了我一些信心。

备忘一下常用语法，方便查询。

Flex布局是什么？

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何容器都可以指定为Flex布局。

设为Flex布局以后，子元素的float、clear、vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 “项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器属性（被flex的元素属性）

  • flex-direction | 排列方向
  • flex-wrap | 是否换行
  • flex-flow | 以上简写
  • justify-content | 水平对齐方式
  • align-items | 垂直对齐方式
  • align-content | 多轴对齐方式

flex-direction决定项目排列方向

  • row（默认值）| row-reverse | column |column-reverse

flex-wrap

  • nowrap(默认) | wrap | wrap-reverse

flex-flow

  • row nowrap（默认值）
  • 是flex-direction和flex-wrap的简写形式，

justify-content定义项目在主轴上的对齐方式。

  • flex-start｜flext-end｜center｜space-between｜space-around

align-items定义项目在交叉轴（垂直方向）如何对齐。

  • flex-start｜flex-end｜center｜baseline｜stretch

align-content定义多根轴线对齐方式，如果项目只有一条轴线该属性不起作用；

  • flex-start｜flex-end｜center｜space-between｜space-around｜stretch

项目属性（flex容器中子元素属性）

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex推荐
  • align-self

order定义项目的排列顺序，数值越小排列越靠前，默认0；

flex-grow定义项目的放大比例，默认0，如果有剩余空间也不放大；

如果所有属性都为1，则他们将等分剩余空间；

flex-shrink定义项目的缩小比例，默认1，如果空间不足，该项目将缩小；

如果所有属性都为1，当空间不足时，都将等比例缩小；

flex-basis定义再分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认auto，类似width和height属性；

flex

  • 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
  • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto);

align-self

  • auto | flex-start | flex-end | center | baseline | stretch;
  • 属性允许单个项目有与其他项目不一样的对齐方
  • 可覆盖align-items属性;
  • 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch;

以上主要来源 Flex 布局教程：语法篇

flex布局的兼容性

查看flexbox的兼容性可以看到在低版本系统中兼容性并不好，这里需要做一定的兼容性处理才能正常使用。

  • IE10部分支持flex，需要-ms-前缀
  • Android4.1/4.2-4.3部分支持flex，需要旧版flex-box兼容写法，需要-webkit-前缀
  • Safari7/7.1/8部分支持flex，需要-webkit-前缀
  • IOS Safari7.0-7.1/8.1-8.3部分支持flex，需要-webkit-前缀

推荐使用gulp-autoprefixer

我的配置文件:

1
2
3
4
5
6
7
8
gulp.task('autofx',function(){
gulp.src('app/css/**/*.css')
	.pipe(autoprefixer({
		browsers:['>0.5%','Android>=2.3'],//兼容到什么版本的浏览器
		cascade:true,//是否美化属性值
	}))
	.pipe(gulp.dest('app/css'));
});

参考

flexbox布局的兼容性

感谢阅读
公众号