发表于: 2018-10-18 22:07:42

2 670


今天完成的事情: 

采用Flex布局的元素,简称”容器”。

它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。


flex-grow

定义了放大比例,默认为0,即如果存在剩余空间,也不会放大。但是,如果所有项目的flex-grow属性为1,则他们将等分剩余空间(如果有的话),如果其中一个为2,则他是其他项目的2倍宽度。

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。






  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

明天计划的事情:学会布局 
遇到的问题:布局散乱
收获:


返回列表 返回列表
评论

    分享到