flex布局及属性

flex布局中的几个概念:
1)容器:如果给一个盒子添加了一个display:flex; 那么这个盒子就是一个容器。
2)项目:容器中的直接子元素就是项目(儿子) 项目默认都是在主轴上进行排列的
3)主轴:默认情况下,项目是按照水平方向从左到右进行排列,这个排列方向就是主轴的方式
4)交叉轴:和主轴垂直的那个轴就是交叉轴


容器的属性: 
flex-direction: direction本意是方向的意思 作用:用来设置主轴的方向
row:默认值 水平面右 默认情况下,如果你不设置主轴的方向,那么默认就是水平向右的
row-reverse reverse本意是反转的意思 水平向左
column column本意是列的意思 让主轴垂直向下
column-reverse 让主轴垂直向上
注意:项目是从主轴的起点开始排列。
flex-wrap:nowrap:不换行 默认值/wrap : 换行flex-flow:不是一个新的属性,是上面两个属性的复合属性
flex-flow:是flex-direction属性和flex-wrap属性的简写形式
如:row nowrap 表示:主轴的水平向右的 不换行
justify-content:用来处理主轴上的富余空间的
flex-start:表示项目在主轴的开始点排列,富余空间在主轴的结束位置
flex-end:表示项目在主轴的结束点排列,富余空间在主轴的开始位置
center: 表示项目在主轴的中间位置,富余空间在主轴的两侧
space-between: 表示富余空间在项目和项目之间
space-around:around表示环绕的意思 表示富余空间环绕项目
注意:什么时候使用justify-content,只有有富余空间时才会使用
align-items: 理解1:项目在交叉轴上的摆放位置 理解2:处理项目在交叉轴的富余空间
flex-start:项目在交叉轴的起来开始排列,富余空间在后面
flex-end::项目在交叉轴的起来结束位置排列,富余空间在前面
center: 项目在交叉轴的起来中间位置排列,富余空间在两侧
align-content: 多行项目,形成多根主轴,此属性是用来设置多根主轴的位置关系
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值