Flex布局的使用方式

鉴于微信小程序和阿里WEEX在开发中都已经使用了Flex,本文介绍一下常用属性.


一、概念及使用方式

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

  .box {
    display: flex;
  }

二、属性


以下6个属性

2.1 flex-direction 方向


决定主轴的方向(即项目的排列方向)

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

2.2 flex-wrap 换行


默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

2.3 flex-flow 方向和换行的简写


flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

2.4 justify-content


主轴上的对齐方式

.box {
    justify-content: flex-start | flex-end | center | space-between | space-around;
  }

2.5 align-items


侧轴上的对齐方式

    .box {
      align-items: flex-start | flex-end | center | baseline | stretch;
    }

2.6 align-content


多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }

三、子属性


3.1 order


定义项目的排列顺序。数值越小,排列越靠前,默认为0。

.item {  order: <integer>;} 

3.2 flex-grow


定义项目对剩余空间的放大比例,默认为0,即如果存在剩余空间,也不放大。类似android里的weight

.item {  
  flex-grow: <number>; /* default 0 */  
}  

来看这里有例有据 深入理解 flex-grow & flex-shrink & flex-basis

3.3 flex-shrink


定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。

注意:flex-shrink只能在不换行的情况下使用

.item {  
  flex-shrink: <number>; /* default 1 */  
} 

来看这里有例有据 深入理解 flex-grow & flex-shrink & flex-basis

3.4 flex-basis


flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

该属性来设置该元素的宽度。当然,width也可以用来设置元素宽度。如果元素上同时设置了width和flex-basis,那么flex-basis会覆盖width的值。

彻底搞懂css3 flex属性学习笔记5

.item {  
  flex-basis: auto | length | percentage | content ; /* default auto */  
}  

3.5 flex


聚合属性 这个属性是flex-grow、flex-shrink和flex-basis属性的简写 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

.item {  
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 
}  

3.6 align-self


align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

.item {  
  align-self: auto | flex-start | flex-end | center | baseline | stretch;  
}


四、具体实战

参考«Flex 布局教程:实例篇»


以下内容参考

阮一峰:Flex 布局教程:语法篇

Junru5:CSS Flex布局属性整理

xiecg:深入理解 flex-grow & flex-shrink & flex-basis

black&white的css3 flex属性学习笔记5

CSS教程

赞 赏
真诚赞赏 手有余香
用微信请张岩喝杯咖啡?

微信支付

用支付宝请张岩喝杯咖啡?

支付宝