前端

弹性盒模型常见例子

2019-06-20  本文已影响6人  前白

这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 ),介绍了Flexbox的主要应用场景,并与传统方式对比, 感受Flexbox布局带来的便捷开发体验。

1 垂直居中对齐

使用与否呈现的效果都是一样的


20.png

2 自适应导航

3 圣杯布局

什么是圣杯布局?比如下面的图片所示:上面是一个标题、中间是左边是目录,中间是内容,右测是一些推荐,底部是一个版权声明。
圣杯布局和双飞翼布局的共同特点都是利用float+margin的负值来实现并列的结构。


201.png
上一篇下一篇

猜你喜欢

热点阅读