您的位置 首页 css教程

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

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布局和传统的布局有什么不同

文章地址:https://www.pyhw.net/31187_flex%e5%b8%83%e5%b1%80%e5%92%8c%e4%bc%a0%e7%bb%9f%e7%9a%84%e5%b8%83%e5%b1%80%e6%9c%89%e4%bb%80%e4%b9%88%e4%b8%8d%e5%90%8c-2.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图