flex布局笔记

一、简介:

flex布局又叫弹性布局,只要将最外层的块级元素display设置为flex,就创建了flex布局。可以把他看成一个盒子,盒子里面有很多子项。设置了flex布局的最外层元素被称为flex container,作为容器存在,里面的子项被称为flex items。container和item分别有不同的属性可以设置。

几个基础概念:


(图片来自网络)

  • 主轴:main axis(从main-start到main-end)子元素默认排布
  • 交叉轴:cross axis(从cross-start到cross-end)
  • main size:单个项目占据主轴长度大小
  • cross size:子元素在交叉轴方向上代销

二、container的属性

2.1 flex-direction:绝对主轴方向,控制子项的整体布局方向

  • row:主轴从左到右
  • row-reverse:主轴从右到左
  • column:主轴从上到下
  • column-reverse:主轴从下到上

2.2 justify-content:主轴的对齐方式,控制子项的对齐方式

  • flex-start:与main start对齐(默认值)
  • flex-end:与main end对齐
  • center:居中对齐
  • space-between:item之间距离相等,main start 和main end 两端对齐(两端靠边)
  • space-evenly:item之间和两端距离相等
  • space-around:item之间距离相等,main start 和main end之间的距离是 items之间距离的一半。

2.3 align-items:item在cross axis上的对齐方式

  • normal:与stretch一致,item在cross axis方向的size为auto时,会自动拉伸至填充container(意思就是item没有设置高度,会自动填充至container高度)
  • flex-start:与cross start对齐(顶部对齐)
  • flex-end:与cross end对齐(底部对齐)
  • center:居中对齐
  • baseline:与基准线对齐

2.4 flex-wrap:控制子项整体单行显示还是换行显示

  • nowarp:默认nowarp,一行放不下时会压缩。
  • warp:宽度不足换行显示
  • wrap-reverse:宽度不足换行显示,但是从下往上开始

2.5 align-content:align-content可以看成和justify-content是相似且对立的属性,justify-content指明水平方向flex子项的对齐和分布方式,而align-content则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行,则align-content属性是没有任何效果的。

  • stretch:默认值,与align-items的stretch类似
  • flex-start:与cross start 对齐,顶部堆砌
  • flex-end:与cross end 对齐
  • center:居中对齐
  • space-between:顶底两端对齐,items之间距离相等
  • space-around:顶底两端是items距离之间的一半,items之间的距离相等
  • space-evenly:全部等距。

三、flex-items属性

3.1 order:

可以设置任意整数,值越小越排在前面,默认值是0

3.2 align-self:

可以覆盖flex container设置的align-items。参数与align-items一致

3.3 flex-grow:

决定flex items 如何扩展。当flex container 在main axis还有剩余size时,可用。可以设置任意非负数字,默认为0。

  • 所有flex-grow总和超过1,每个item扩展的size为 剩余size*flex-grow/sum
  • 所有flex-grow总和不超过1,每个item扩展的size为 `剩余size*flex-grow

注:flex items扩展后端饿size不能超过width\height

3.4 flex-shrinnk:

不支持负值,默认值是1,也就是默认所有的flex子项都会收缩。如果设置为0,则表示不收缩,保持原始的fit-content宽度。

  • 如果只有一个flex子项设置了flex-shrink:

flex-shrink值小于1,则收缩的尺寸不完全,会有一部分内容溢出flex容器。
flex-shrink值大于等于1,则收缩完全,正好填满flex容器。

  • 如果多个flex子项设置了flex-shrink:

flex-shrink值的总和小于1,则收缩的尺寸不完全,每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。
flex-shrink值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和flex-shrink值的比例一样。

3.5 flex-basis:

用来设置item的宽度。

决定items宽度的优先级(从高到低):

max-width\min-width > flex-basis > width >内容的size

参考:https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/

posted @ 2020-02-01 20:05  学一点也是好  阅读(...)  评论(...编辑  收藏