ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

移动端flex布局

2020-03-01 15:53:20  阅读:216  来源: 互联网

标签:flex 默认值 容器 布局 space 对齐 移动 元素


移动端flex布局

弹性盒布局语法分为两部分:

1. 添加在父容器上的语法

(1)display : flex; 设置为弹性盒(父元素添加)

 

(2)flex-direction: 主轴排列方式

  row; 默认值,默认为横向排列。

  row-reverse; 反转横向排列(右对齐,从后往前排,最后一项排在最前面。                  

  column; 显示为列。

  column-reverse; 反转纵向排列,从下往上排,最后一项在最上面。

(3)flex-wrap: 是否进行换行处理。

  nowrap; 默认值,不换行处理

  wrap; 换行处理  (第二行处于中间位置)

  wrap-reverse; 反向换行

  

(4)justify-content: 决定了主轴方向上子项的对齐和分布方式。(主轴对齐方式)

  flex-start; 默认,顶端对齐。    

  center; 居中对齐。

  flex-end; 末端对齐。

  space-between; 表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。

  space-around; 均分对齐,around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。

  space-evenly; evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

 

(5)align-items : 每一行中的子元素上下对齐方式.(侧轴对齐方式)

  flex-start;(y轴顶部对齐)

  center;(y轴中间对齐)

  flex-end;(y轴以底部对齐)   

  baseline;如果弹性盒元素的行内轴与侧轴为同一条,则该值与flex-start等效。其他情况下,该值将参与基线对齐。

(6)align-content : 行与行之间的对齐方式。                         

  flex-start;(以开始位置为对齐方式)

  center;(居中对齐)

  flex-end;(底对齐)   

  space-between;(两端对齐)

  space-around;(均分对齐)

  注:要两行即两行以上 。

2.添加到子容器上的语法    

(1)flex-grow : 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。                

  0; 默认值 , 不去扩展

  1; 去扩展 , 会把空白区域全部占满

 

(2)flex-shrink : 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。                

  正常默认值是1

  0表示不收缩。           

  注:当没有空余并且值大于1的时候才收缩,并且没有负值。

 

(3)flex-basis : 跟flex-shrink/flex-grow很像。

flex-shrink/flex-grow是设置一个比例值,flex-basis是设置一个具体值。

 

(4)flex:1; 每个子项都加flex:1;则剩余空间平分。

 

(5)algin-self: 规定灵活容器内被选中项目的对齐方式。    

  auto;默认值。元素继承了父容器的align-items属性。如果没有父容器则为“stretch”                

  flex-start;元素位于容器的开头。

  center;元素位于容器的中心。

  flex-end;元素位于容器的结尾。

  stretch;元素被拉伸以适应容器。

 

(6)order:number顺序优先级,数字越大越往后排,默认为0,支持负数。

       

 

标签:flex,默认值,容器,布局,space,对齐,移动,元素
来源: https://www.cnblogs.com/hwy6/p/12390140.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有