认识Flex布局

  • flex布局是目前web开发中使用最多的布局方案
  • flex布局(Flexible布局,弹性布局)
  • 目前特别在移动端用的最多,IE6~IE9不支持

两个重要的概念

  • 外面开启flex布局的元素叫做 flex container
  • flex container里面的子元素叫做flex items

设置display属性为flex或者inline-flex可以成为flex container,inline-flex是flex container以inline-level形式存在

Flex布局模型flex布局模型

  • main start 主轴开始位置
  • cross end 交叉轴结束位置

Flex属性,应用到flex-container上的CSS属性

  • flex-direction:决定主轴方向
  • flex-wrap:让flex-items多行显示
  • justify-content:决定主轴上flex-items如何排布
  • align-items:决定交叉轴上flex-items对齐方式
  • align-content:决定flex-items多行显示时在交叉轴的排布方式

应用在flex item上的CSS属性

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

flex-container

flex-container是外面的元素,父级元素。

flex-direction

flex items 默认都是沿着 main axis 从main start 开始往main end 方向排布,使用flex-direction可以改变主轴的方向,flex-direction有以下四个值:

1
2
3
4
row: 主轴从左到右
row-reverse: 主轴从右到左
column: 主轴从上往下
column-reverse

flex direction

代码:https://paste.ubuntu.com/p/JDJ7BDzdwB/

justify-content

justify-content决定了flex item在主轴方向上的对齐方式,justify-content有以下几个值:

1
2
3
4
5
6
flex-start(default):与main start对齐
flex-end:与main end对齐
center:居中对齐
space-between:flex items之间的距离相等,与main start/end 两端对齐
space-evently:flex items之间的距离相等,与main start/end 间的距离相等
space-around: flex items之间的距离相等,与main start/end 之间的距离是flex items之间距离的一半

justify-content

justify-content

align-items

align-items决定了flex items在cross axis上的对齐方式,有以下几个值:

1
2
3
4
5
6
normal:弹性布局中,和stretch效果一样
stretch:当flex items在cross axis方向的size为auto时(没有指定item高度),会自动拉伸至填充flex container
flex-start(default):与cross start对齐
flex-end:与cross end对齐
center: 交叉轴的中心点对齐(居中对齐)
baseline:与基准线对齐(第一行文本作为基线)

stretch 和 normal都是针对没有height的元素进行拉伸,如果元素有了高度,则不显示效果

baseline是基于文字的第一行作为基准对齐

flex-align-items

代码:https://paste.ubuntu.com/p/Yfv9Xkvhqx/

flex-wrap

flex-wrap(包裹),默认情况下,所有的flex items都会在同一行显示,放不下就收缩宽度,flex-wrap默认值为no-wrap不换行,可以修改为wrap进行换行显示:

1
flex-wrap: wrap; /* 其他的值: nowrap wrap-reverse;*/

flex-wrap

flex-wrap换行显示后,默认会把cross axis等分

flex-flow

flex-flow是flex-direction和flex-wrap的缩写属性,语法如下:

1
flex-flow: row-reverse wrap;

align-content

align-content决定了多行flex items在cross axis上的对齐方式,用法与justify-content类似,有以下属性:

1
2
3
4
5
6
7
8
/* 属性值和justify-content的属性值含义相同,只是对齐方向不同 */
stretch
flex-start
flex-end
center
space-between
space-around
space-evenly

align-content

flex-items

flex-items是里面的小元素,是子级元素

order

order决定了flex-items排布的顺序,可以设置任意整数(正整数、负整数、0),值越小就越排在前面,默认值为0。

order

align-self

flex-items可以通过align-self覆盖flex-container设置的align-self

  • auto:默认值,遵从flex-container的align-items设置
  • stretch、flex-start、flex-end、center、baseline效果和align-items一致
align-self

flex-grow

flex-grow决定了flex-items如何扩展

  • 可以设置任意非负数字(正小数、正整数、0),默认值是0

  • 当flex container在main axis方向上有剩余size时,flex-grow属性才会有效

  • 如果所有flex items的flex-grow总和超过1,每个flex item扩展的size为 flex-container剩余size * flex-grow / sum,即剩余按flex-grow值等分

  • 如果所有flex items的flex-grow总和不超过1,每个flex item扩展的size为 flex container的剩余size * flex-grow

  • flex-items扩展后的最终size不能超过max-width/max-height

flex-grow

flex-shrink

flex-shrink决定了flex-items如何收缩

  • 可以设置任意非负数字,默认值是1
  • 当flex items在main axis方向上超过了flex container的size,flex-shrink才会有效
  • 如果所有的flex-items的flex-shrink总和超过1,每个flex item收缩size为:flex-items超出flex container 的size * 收缩比例 / 所有flex items的收缩比例之和
  • 如果所有flex items的flex-shrink综合sum不超过1,每个flex item收缩size为flex items超出flex container 的size * sum * 收缩比例 / 所有 flex items收缩比例之和
  • 收缩比例 = flex-shrink * flex-item 的 base size
  • flex items收缩后最终size不能小于min-width/min-height

flex-basis

flex-basis用来设置flex items在main axis方向上的base size,auto默认之,具体宽度数值(100px)

决定flex items最终base size的因素,优先级从高到低

  • max-width/max-height/min-width/min-height
  • flex-basis
  • width/heigth
  • 内容本身的size
1
flex-basis: 200px;

flex

flex是flex-grow || flex-shrink || flex-basis的缩写属性,属性可以指定1个,2个或3个值。

1
2
3
4
5
6
7
8
9
1个值 
无单位:flex-grow
有单位:flex-basis

2个值
无单位:flex-shrink
有单位:flex-basis

3个值: flex-grow flex-shrink flex-basis

Reference

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://www.bilibili.com/video/BV1E7411774G

https://awdr74100.github.io/2019-11-07-css-flexbox/