文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么理解html的flex布局

2024-04-02 19:55

关注

本篇内容主要讲解“怎么理解html的flex布局”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么理解html的flex布局”吧!

需要注意的是:任何容器都可以指定为flex布局,但是在flex布局中float、clear、vertical-align都会失效。

1.主轴方向

flex容器分为x轴与y轴,x轴正方向默认从左至右,y轴正方向默认从上到下。

定义一个容器为弹性布局display:flex;主轴默认方向为左到右;如果我们想去改变flex的默认方向,就需要用到flex-direction属性flex-direction有四个属性值,分别是row、row-reverse、column、column-reverse,分别为从左到右、从右到左、从上到下、从下到上!

2.主轴方向的对齐方式

(1)justify-content:flex-start则主轴为左对齐

(2)justify-content:flex-end 则主轴为右对齐

(3)justify-content:center 则主轴为居中

(4)justify-content:space-between则每个子项目之间等距离,前提是有剩余空间

(5)justify-content:space-around则每个子项目会平分剩余空间,子项目与父元素边界处也会存在距离

3.纵向单行对齐方式

(1)align-item:flex-start纵向从上到下

(2)align-item:flex-end纵向从下到上

(3)align-item:center纵向居中对齐

(4)align-item:baseline以基线对齐

(5)align-item:strech这是默认方式

4.子项目换行

(1)flex-wrap:wrap超出父元素会换行

(2)flex-wrap:wrap-reverse反向换行

(3)flex-wrap:no wrap这是默认方式,不换行

5.纵向多行对齐方式

(1)align-content:flex-start上对齐

(2)align-content:flex-end下对齐

(3)align-content:center上下居中

(4)align-content:space-between

(5)align-content:space-around

以上均是添加到父元素身上的属性

6.子项目的一些属性

(1)order:0,定义子项目的排序位置,数值越小越靠前,默认为0

(2)flex-grow:0;定义子项目的放大比例,默认为0不放大

(3)flex-shrink:1;定义子项目的缩小比例,默认为1,空间不足将等比缩小,0则不缩小,负值无效

(4)flex-basis:1;定义子项目占据空间,默认为auto,可以设置百分比,也可以是固定值

以上三种属性可以简写,比如flex:1,1,1顺序如上

到此,相信大家对“怎么理解html的flex布局”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯