学习Flex布局

今天,上网找了下各种flex的博文学习了一番,资料如下:
阮一峰的网络日志
Dive into Flexbox
2009年,W3C提出了—Flex布局,特点是

介绍

Flex(Flexible Box),意思为”弹性布局”
任何一容器都可以指定为Flex布局,甚至行内元素也可以

1
2
3
4
5
6
.box{
display:flex;
}
.box{
display:inline-flex;
}

但是由于支持的情况各不相同,我们还是需要对属性做兼容性处理如加上-webkit-前缀等.

失效特性

  • float
  • clear
  • vertical-align

理解

容器采用flex布局后,就被称为flex容器(flex container),子元素被称为容器成员,为flex项目(flex item)
对于flex布局其实理解下图即可
clipboard.png

容器中默认有两根轴,主轴(main axis)和cross axis(交叉轴)
开始结束位置分别为main/cross start和main/cross end
排列的顺序为main/cross direction.
flex item占据main axis上空间为main size,占据cross axis上的空间为cross size.


flex属性

容器属性

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

flex-direction
用于改变flex容器的轴线,默认值为row

  • row(default)
  • row-reverse(就和后缀一样,为main axies反向排列)
  • column(改变轴线为cross axies,为cross axies方向排列)
  • column-reverse(同理改变轴线,cross axies方向反向排列)

justify-content
用于改变flex容器中flex item在轴线上的位置

  • flex-start(default,从axies start开始紧靠排列)
  • flex-end(axies end端紧靠排列)
  • center(展现如其名,axies中间)
  • space-between(相当于将空间等分,每份空间中flex-start排列)
  • space-around(空间等分,每份空间中center排列)

align-items
为justify-content的补充属性,为flex item在非flex-direction指定的另一轴线的位置

flex-wrap
直到现在为止,每个Flex 容器只有一条Flex Line,使用flex-wrap,我们能创建一个拥有多条Flex Line的Flex 容器

  • nowrap(default)
  • wrap
  • wrap-reverse
    设置为wrap时,假如我们一行空间不够,我们的flex item在空间不足时会进行换行.创建新的一行.
    设置为wrap-reverse时,在wrap换行效果的同时,将会反向展现

align-content
该属性定义了flex-wrap的行为,这和align-item有点相似,但是和其不同的是该属性align的是Flex Line.

  • stretch(default)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
    看到他们其实大概就知道是怎么回事啦,这里也就不多说了,其实想象一下就知道了,主要是用于设置行/列位置的属性

flex-flow
= flex-direction + flex-wrap
用于快速设置上述两个属性.

项目(item)属性

  1. order
  2. flex-grow
  3. flex-shrink
  4. flex-basis
  5. flex
  6. align-self

值得注意的属性
margin
在flex布局中,margin:auto是一个很有用的属性,设置后会自动吸收多余的空间,可以利用flex item的该属性进行多样化的布局.


order
设置元素的顺序,数值越小,排列越前,默认为0

flex-grow
为放大比例,默认为0

flex-shrink
定义了缩小比例,默认为1,即如果空间不足,项目将会缩小
所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩,那设置flex-shrink:0;数值代表被缩小的程度
!负值无效者缩小

flex-basis
在分配多余空间前,项目占据的主轴的空间,浏览器将根据该属性,计算主轴空间是否有多余空间.

  • auto(default)
  • 设定为width/height一样的值如50px,即固定项目占据的空间

flex
顺序为 flex-grow flex-shrink flex-basis,默认为0 1 auto,后两个属性为可选选项
auto(1 1 auto)/none(0 0 auto)

align-self
用于覆盖Flex容器中的align-items属性,它有和align-items相同的属性值

  • auto(继承align-items属性,无父元素则等同于stretch)
  • stretch
  • flex-start
  • flex-end
  • center
  • baseline