flex布局和传统的布局有什么不同

码农天地 - 2020-06-21 19:00:00

---

flex布局和传统的布局有什么不同？

传统布局：基于盒模型，依赖 display属性 、position属性 、float属性；

flex布局：flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

（推荐教程：css快速入门）

设为display:flex的元素称为"容器"，它的子元素称为"项目"。需要注意的是，容器设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效；

为什么要确定主轴和侧轴？

主轴和侧轴是通过flex-direction确定的(默认是row)之所以要确定主轴，是因为要确定项目的对齐方向：

如果flex-direction是row或者row-reverse，那么主轴就是justify-content；

如果flex-direction是column或者column-reverse,那么主轴就是align-items.

以上就是flex布局和传统的布局有什么不同的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：flex 布局本文转载于：掘金，如有侵犯，请联系a@php.cn删除上一篇：如何合理使用CSS框架？下一篇：CSS Modules 详解

相关文章

相关视频

css box-flex属性怎么用css box-flex-group属性怎么用CSS3 flex布局总结CSS弹性盒模型flex在布局中的使用方法flex布局和传统的布局有什么不同使用CSS3动画属性使用CSS3渐变、倒影属性使用CSS3多列布局属性

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

V

认证0级讲师

最近文章docker核心概念介绍5702020全新Java面试题——网络（二）443如何运行和控制nginx488发布技术文章最新文章热门排行

CSS Modules 详解flex布局和传统的布局有什么不同如何合理使用CSS框架？css选择器有哪些？哪些属性是可以继承的？CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析（代码实例）使用 CSS 实现一个简单的骨架屏（Skeleton Screen）使用CSS实现皮卡丘CSS 中伪类的使用（干货）

html怎么添加背景图片且让图片平铺整个页面？（代码示例）css如何设置背景图片？background属性添加背景图片css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍html a标签怎么设置颜色？超链接的颜色设置总结（css样式）使用css3在网页中实现各种三角形样式集合（原理解析）css如何设置透明度？设置透明度的两种方法（代码实例）css实现背景颜色半透明的两种方法css3如何设置边框颜色渐变？css3边框颜色渐变的两种实现方法推荐视频教程CSS3进阶视频教程CSS3精讲视频教程CSS视频教程-玉女心经版CSS3 极速入门视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 465014;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签