FlexBox 学习记录

Flexbox 也算有比较多的属性,把它们记录一下,方便以后查看。
Flexbox 有两个轴,水平方向为主轴(main axia),竖直方向为辅轴,或称交叉轴(cross axis),左上为起点(start),右下为终点(end),类似于数学上的第四象限。
本文中的方向默认为 LTR (left to right)排版也就是从左向右为正方向的排版模式。

容器属性

容器属性都要写在父元素上。
容器属性一共有6个:
*flex-direction 子项目的排列方向
*flex-wrap 子项目换行方案
*flex-flow 前两个属性的简写
*justify-content 子项目沿主轴对齐方案
*align-item 子项目沿辅轴对齐方案
*align-content 多轴线沿辅轴对齐方案

首先要为父容器设置 display:flexdisplay:inlin-flex

flex-diretion

控制父容器内部项目的排列方向,
默认为 flex-direction:row,表示从左向右水平排列
可选值为:

  • row-reverse :从右向左水平排列
  • column:从上到下竖直排列
  • column-reverse:下到上竖直排列

flex-wrap

默认情况下,子项目都排在一条线(只有一条轴线)上,flex-wrap属性定义,如果一条轴线排不下,如何换行。
默认为flex-wrap:nowrap,表示单行显示(也就是不换行),这时候每个子项目的宽度会被按比例压缩。
可选值为:

  • wrap 换行显示,第一行在上多出来的子项目在下。
  • wrap-reverse 换行显示,第一行在下(仍然是从左向右排序)。

简写方式:flex-flow

flex-flow是用于同时设定flex-diretionflex-wrap属性的简写方法,也是推荐写法
默认值为:flex-flow:row nowrap
可以只写一个值,也可以同时写两个值,第一个值规定了flex-diretion,第二个值规定了flex-wrap,两个值用空格隔开。
只传入一个值的时候,会自动判断该值用于规定什么属性。

justify-content

用于规定主轴方向的子项目的对齐方式
默认值为justify-content:flex-start,表示:子项目沿主轴起始位置靠齐(左对齐)。
其他可选值为:

  • flex-end:子项目沿主轴结束位置靠齐(右对齐)。
  • center:沿主轴的中间位置靠齐(居中)。
  • space-between:子项目会平均地分布在行里。第一个子项目位于主轴起点位置,最后一个子项目在主轴终点位置。
  • space-around:子项目会平均地分布在行里,两端保留「子项目间距的一半」的空间。

align-items

justisy-content类似,其规定了辅轴方向子项目的对齐方式
默认值为justify-item:stretch 表示:如果项目未设置高度或设为auto,将占满整个容器。
其他可选值为:

  • flex-start:与辅轴的起点对齐(顶端对齐)。
  • flex-end:与辅轴终点对齐(底端对其)。
  • center:与辅轴轴的中点对齐(竖直居中)。
  • baseline: 项目的第一行文字的基线对齐。

align-content

定义了多根轴线的对齐方式,如果只有一根轴线(也就是flex-wrap:nowrap),该属性不起作用,与justify-content类似。
默认值为:stretch(默认值)表示轴线占满整个容器
其他可选值为:

  • flex-start:与辅轴的起点对齐(顶端对齐)。
  • flex-end:与辅轴终点对齐(底端对其)。
  • center:与辅轴轴的中点对齐(竖直居中)。
  • space-between:与辅轴两端对齐,轴线之间的间隔平均分布。
  • space-around:轴线会平均地分布在行里,两端保留「轴线间距的一半」的空间。

项目属性

项目属性一共6个

  • order 子项目的序列号
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex 上面三个flex开头的属性的简写
  • align-self

order

子项目的序列号,值是一个无单位的整数,数值越小,排列越靠前,序列号可以为负数。
默认为:0

flex-grow

用来定义子项目的放大比例,值是一个无单位的整数。
默认为 0,表示即时有剩余空间,也不放大。
如果所有的子项目的flex-grow值都相同(比如都是1),则它们将等分剩余空间。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink

用来定义子项目的收缩比例,值是一个无单位的整数,和flex-grow类似,负值对该属性无效
默认为 1,即如果空间不足,该项目将缩小。
flex-shrink属性为0,则空间不足时,也不缩小。
如果所有子项目flex-shrink属性都为0,并且子项目宽度之和大于容器宽度,那么子项目会撑破容器。

flex-basis

flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)
默认值为:auto,表示项目本来的大小。
它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。

align-self

用法基本和align-items相同,可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性
如果没有父元素,则等同于stretch。
其他可选值为:

  • flex-start:与辅轴的起点对齐(顶端对齐)。
  • flex-end:与辅轴终点对齐(底端对其)。
  • center:与辅轴轴的中点对齐(竖直居中)。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch: 如果项目未设置高度或设为auto,将占满整个容器
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Comments
Write a Comment