欢迎光临
我的个人博客网站

CSS Flex一维布局


一、启动flex布局

  在属性中加入  display:flex;

二、确定flex布局的主轴

  flex布局有一条主轴和一条交叉轴,启用此布局默认是水平的主轴main axis。
  使用flex-direction: ;属性来确定主轴的方向,该属性有以下四个值

  row  水平主轴,起点在左端     ||  row-reverse 主轴为水平方向,起点在右端
  column 主轴为垂直方向,起点在上方        ||  column-reverse主轴为垂直方向,起点在下方

三、确定换行属性  flex-wrap: ;

  设置了该属性项目就不会等分容器宽度,而是按照自身的宽度进行排列,排不下的时候就换行  

  换行也就是一行排不下去了,该属性有三个属性值

  nowrap不换行
  wrap换行
  wrap-reverse换行,向上换行

四、前面两个属性简写flex-flow: ;

  flex-flow属性是flex-direction属性flex-wrap属性的简写形式

  默认值为row nowrap

五、确定主轴方向上的对齐方式  justify-content: ;

  该属性对应五个值分别为
  flex-start  左对齐  ||  center  居中  ||   flex-end  右对齐
  space-around;  每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  space-between;  两端对齐,项目之间的间隔都相等
  space-evenly;   距离两侧的间距和项目之间的间距相等
  CSS Flex一维布局 

六、确定在交叉轴的对齐属性  align-items: ;

  flex-start //(默认)交叉轴的起点对齐

  flex-end //交叉轴的终点对齐

  center //交叉轴的中点对齐

  baseline //项目的第一行文字的基线对齐

=====以上全部是设置在容器上的属性=====


=====以下全部是设置在项目自身属性=====

七、确定项目排序属性  order: ;

  属性值0,1,2,3…….该属性值越小排列越靠前

八、确定项目单独排列属性  align-self: ;

  属性值center居中、flex-end靠底端对齐

九、确定项目放大、缩小、主轴方向上的列宽

  flex: flex-grow flex-shrink flex-basise;
  默认值 0 1 auto 
  两个快捷键auto(1 1 auto)、none( 0 0 auto)

  根据设置的grow、shrink值来进行分配大小。
  若是grow和shrink都是1则进行均分项目剩余空间,若都是0则剩余空间不进行分配
  由于flex-basise的权重比width、 height的权重要高,所以flex-basise属性会覆盖前面的主轴方向上的列宽

赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS Flex一维布局
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏