Flex的使用方式

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


一、概念及使用方式

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

  .box {
    display: flex;
  }

二、属性


以下6个属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.1 flex-direction 方向


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

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
  • row (默认值):主轴为水平方向,起点在左端。
  • row-reverse :主轴为水平方向,起点在右端。
  • column :主轴为垂直方向,起点在上沿
  • column-reverse:主轴为垂直方向,起点在下沿。

2.2 flex-wrap 换行


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

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

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;
  }
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数或者只有一项时,效果等同于flex-start
  • space-around:表示间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数或者只有一个项时,效果等同于center

2.5 align-items


侧轴上的对齐方式

  .box {
    align-items: flex-start | flex-end | center | baseline | stretch;
  }
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。


  • flex-start:侧轴的起点对齐。

  • flex-end:侧轴的终点对齐。

  • center:侧轴的中点对齐。


  • baseline: 项目的第一行文字的基线对齐。


2.6 align-content


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

  .box {
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  }
  • stretch:默认值,当Flex子项未设置高度或者高度值为auto时,stretch起作用,将Flex子项高度设置为行高度。

  • flex-start:表示各行与侧轴开始位置对齐,第一行紧靠侧轴开始边界,之后的每一行都紧靠前面一行

  • flex-end:表示各行与侧轴的结束位置对齐,最后一行紧靠侧轴结束边界,之后的每一行都紧靠前面一行

  • center:表示各行与侧轴中间对其

  • space-between:表示两端对齐,中间间距相等。要注意特殊情况,当剩余空间为负数时,效果等同于flex-start

  • space-around:表示各行之间间距相等,中间间距是两端间距的2倍。要注意特殊情况,当剩余空间为负数时,效果等同于center


四、子属性


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

4.1 order


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

.item {  order: <integer>;} 

4.2 flex-grow


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

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

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

4.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

4.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 */  
}  

4.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'> ] 
}  

4.6 align-self


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

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

以下内容参考

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

Junru5:CSS Flex布局属性整理

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

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

CSS教程

推荐阅读更多精彩内容

  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 2,897评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 2,506评论 0 6
  • 应用在父元素上-flex box 1.模型 方向 换行 display: flex(盒子模型) 定义父元素为fle...
    林立镇阅读 2,795评论 0 27
  • 传统的网页布局基于盒装模型,使用display,position,float属性来达成各种布局。对于一些特殊的布局...
    exialym阅读 2,238评论 0 11
  • 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已...
    丫3阅读 366评论 0 0