快捷搜索:  汽车  科技

flex布局和传统布局哪个常用?响应式布局flex布局

flex布局和传统布局哪个常用?响应式布局flex布局

flex布局和传统布局哪个常用?响应式布局flex布局(1)

Web 应用的样式设计中,布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局,从而改变组件的尺寸和位置,以达到最佳的显示效果。

布局的传统解决方案,基于盒状模型,依赖display属性 position属性 float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

flex布局和传统布局哪个常用?响应式布局flex布局(2)

下面就是一个flex布局的例子:效果图

flex布局和传统布局哪个常用?响应式布局flex布局(3)

效果2 屏幕——尺寸变小

CSS

flex布局和传统布局哪个常用?响应式布局flex布局(4)

flex布局和传统布局哪个常用?响应式布局flex布局(5)

HTML

flex布局和传统布局哪个常用?响应式布局flex布局(6)

弹性盒布局模型相关的概念

flex布局和传统布局哪个常用?响应式布局flex布局(7)


flex布局和传统布局哪个常用?响应式布局flex布局(8)

猜您喜欢: