HTML+CSS简单布局

今天在教程中看到flex布局的例子，之前没有接触过，所以晚上来总结一下。

有时候我们需要做出下图的效果

下方为缩略图，上面是大图，点击缩略图可以查看大图。

1.float布局

CSS中的float属性很强大，可以在一行放置多个块级元素，很适合多个div并列的情况，当然，也适合这种。

设置li标签float属性为left，即左浮动，使图片在同一行显示，再设置间距等细节即可完成效果。

2.flex布局

这是今天重点要说的。首先我们了解一下什么是flex布局。

Flex 是 Flexible Box 的缩写，翻译成中文就是 “弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

以上这段话是网上复制的，可以很明确地告诉我们：    1.flex布局不同于传统盒子模型的布局         2.不需要再考虑兼容性问题

 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称” 容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称” 项目”。

在这个案例中，如果将ul设置为flex容器，那么每个li对象都是flex item。

将上面的代码中style部分改成：

 即可实现相同的效果

 

最后配合JavaScript可以实现点击缩略图更换大图的效果。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

文章中图片素材（图片来自网络，侵删）