前端CSS Flex布局8大重难点知识,收藏起来吧
2009 年,W3C 提出了一种新的方案 —-Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex 布局将成为未来布局的首选方案。这也是学习前端必须掌握的主流布局方案!今天给大家分享一下 Flex 布局的 8 大重难点知识。
- Flex 实现两栏布局 (左固定,右自适应);
- Flex 实现三栏布局 (左右固定,中间自适应);
- Flex 实现元素水平垂直居中;
- flex 怎么实现盒子 1 在最左边,2 、3 在最右边;
- 如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题?
- flex 实现 8 个元素分两行排列 每行 4 个平均分布 - 自适应;
- flex 画 3 色子;
1、Flex 实现两栏布局 (左固定,右自适应)
给父元素加上 display:flex; // 设为弹性布局 子项.left 设置固定宽 width:300px 子项.right 不设置宽,添加 flex-grow:1;// 占满所有剩余空间
2、Flex 实现三栏布局 (左右固定,中间自适应)
给父元素加上 display:flex; // 设为弹性布局 子项.left 和 .right 分别设置固定宽 width:200px 和 width:250px; 子项.middle 不设置宽,添加 flex-grow:1;// 占满所有剩余空间
3、Flex 实现元素水平垂直居中
方法一:给 flex 容器添加以下三个属性,就可以实现子项水平垂直居中 display: flex; // 容器为 flex 布局 justify-content: center; // 子项在主轴(水平居中) align-items: center; // 子项在交叉轴(垂直居中) 方法二: 父元素加上 display:flex; 时 ,给子项加上 margin: auto; 可实现在垂直方向居中
4、flex 怎么实现盒子 1 在最左边,2 、3 在最右边
在父容器.container 中构建两个子项 .left 和.right (.right 不要加宽度) 给父容器加上以下属性,使元素.left 和.right 两端对齐 justify-content: space-between;// 两端对齐 display: flex; // 弹性布局 在.right 中构建两个子元素.item1 和.item2
5、如何解决 flex 布局 7 个元素使用 space-between 最后一行两边分布的问题?
解决方案:如果我们每一行显示的个数为 n,那我们可以最后一行子项的后面加上 n-2 个 span 元素,span 元素的宽度和其它子项元素宽度一样,但不用设置高度。 为什么是添加 n-2 个 span 元素呢 ? 当最后一行只有 1 个子元素时,他会默认靠左,不用处理 当最后一行子元素正好时,我们就不用关心这个问题。 所以要去掉这两种情况,只需要加 n-2 个 span 元素就好
6、flex 实现 8 个元素分两行排列 每行 4 个平均分布 - 自适应
给父容器添加如下属性: display: flex; //flex 布局 flex-wrap: wrap; // 内容放不下自动换行 给子项添加如下样式: flex-basis: 25%; // 项目占据主轴(父容器宽)的空间。 flex-grow: 0; // 不放大 flex-shrink: 0; // 缩小 以上三个属性,也可以简写成 flex: 0 0 25%;
7、flex 画 3 色子
首先给父容器加上 justify-content: space-between; 使三个色子,两端对齐 第二个 2 色子加上 align-self: center; 控制自身垂直居中对齐 第三个 3 色子加上:align-self: flex-end; 单独控制自身垂直底部对齐
当然 Flex 布局已经到了 CSS 阶段的后期阶段了,如果你没有学过 CSS,或者掌握不牢固,建议可以从开始学习下 CSS。
相关文章
- 腾讯云 x Elasticsearch 携手三周年有奖征文大赛
- 微服务架构下路由、多活、灰度、限流的探索与挑战
- CODING X 小鹅通|助力知识教育行业开启 DevOps 数字化转型新篇章
- 如何做好组装式应用?
- 干货 | 疫情背景下的中长期月度预测方案
- 干货 | 携程酒店慢查询治理之路
- 开源 | 携程度假零成本微前端框架-零界
- RCTF-Web
- 干货 | 记一次跨域配置引发的思考
- RSS Can:将网站信息流转换为 RSS 订阅源(三)
- photoshop2023软件安装包64位最新版下载
- DNSPod十问陈迪菲:从C到B,鹅厂设计师的中场战事
- 【ES三周年】+es快速入门&基础概念讲解
- 行业方案 | 新规落地,企业集团财务公司如何构建数智财务体系?
- TAPD思享汇|高科制造企业如何软硬协同、敏捷提效?
- 瑞幸瞄准蜜雪冰城?
- 干货 | 深度学习在携程搜索词义解析中的应用
- 干货 | Islands Architecture(孤岛架构)在携程新版首页的实践
- 干货 | 提前在开发阶段暴露代码问题,携程Alchemy代码质量平台
- 干货 | 浅谈携程大住宿研发效能提升实践