flex布局-学习

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

• 简便

• 完整

• 响应式

兼容性如下
查询链接

介绍

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

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

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

失效特性

• float

• clear

• vertical-align

理解

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

容器中默认有两根轴,主轴(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-start(default)

• flex-end

• center
  以上三种也就不赘述啦

• stretch (如同属性名一样,将元素在轴向上伸展开来,注意在固定了height的情况下不会拉伸)

• baseline (定位线为item中第一行文字的底部线,根据该线进行定位,也就是基线对齐,取距离start最长的基线对齐)
  值得注意的是属性值baseline,其基线的定义需要进一步了解

链接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基线定义会根据情况不同而变化,通常情况下为第一项的底线(文字底部/图片底部),无内容的flex item为flex item底部border线.

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)

• <length> 设定为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