CSS容器-弹性布局

1:什么是弹性布局?

        是一种布局方式,主要解决某元素中的“子元素”的布局方式,为布局提供了最大的灵活性

 

2:弹性布局

        要实现布局效果的子元素,称为项目

        

        主轴

                项目们排列方向的一根轴,称之为主轴

                如果项目按 X 轴排列(横向排列),那么 X 轴就是主轴

                如果项目按 Y 轴排列(纵向排列),那么 Y 轴就是主轴

 

        交叉轴

                与主轴垂直交叉的轴称之为交叉轴

                如果 X 轴是主轴,那么 Y 轴就是交叉轴

                如果 Y 轴是主轴,那么 X 轴就是交叉轴

 

 

3:语法

        1:flex 容器

                将元素变为flex 容器后,所有的子元素都将变成 flex 项目,都允许按照弹性布局方式排序

                        属性:display

                            取值:1:flex:  将块级元素变成容器

                                        2: inline-flex :  将行内元素变成容器

                            注意:1:元素设置为 flex 容器后,子元素的 float,clear&#

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值