随着移动设备的普及，网站和应用的响应式布局越来越成为一个重要的问题，而CSS Flexbox布局成为了响应式布局的新一代解决方案之一。本文将详细介绍CSS Flexbox布局及其在实现一个仿照Pinterest的动态布局中的灵活应用。
什么是CSS Flexbox布局？
CSS Flexbox布局在CSS3中新增加，在flex container和flex item之间创建可弹性元素的布局模型。Flexbox布局具有以下特点：
Flexbox布局是针对一维排列的元素的，通常为水平方向（行）或垂直方向（列）进行排列。
Flexbox布局将布局空间分为两类，即flex container和flex item。需要被排序的元素为flex item，而容器则由flex container来定义。
Flexbox布局允许通过flex-grow、flex-shrink和flex-basis属性实现不同元素的弹性伸缩。
如何使用CSS Flexbox布局实现动态布局？
下面我们通过一个实例，来详细介绍如何使用CSS Flexbox布局实现三列等高布局，这样就能轻松实现一个仿照Pinterest的动态布局。
首先，我们用以下代码创建一个简单的HTML模板：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ------- - --------- ----------------- ------ ---------------- --------------- --------------------- ------- ------ -------- --------------- ---------- --- -------------- -- --------- ---------- --------- ----------------------- ---------- ------------------ ------- ------------------ ---------------------- ------ ----------------------- --- ------ ----- ----------------------- ----- ----- --- ----- ----------- ---------- --------- ------------ ---------- ------------------ ------- ------------------ ---------------------- ------ ---------------------- --- ------ ----- -------------------------- -------- ---------- --- --- ------- ----- ------- ------- ------------ ---------- ------------------ ------- ------------------ ---------------------- ------ ----------------------- --- ------ ----- -------------------------- ------- --- -- ------- -------- ------ ---- ------------ ------ --- -------- ----- ----- --- -------- ------------ ----- ------ ---------------------------- ----- ----------- -------- --------------- --------------- ------- --------- ------------- ---------- ------- -------
接着，我们需要通过CSS来定义flex-container容器及其内部的flex-item元素。
-- -------------------- ---- ------- -- ------- -- ---- - -------- -- --------- -- ------------- ------ - ---- --------------------- -- -------- ------- - ------------------ ------ ------- ------ --------- ----- ------------ ------- - --------------- - --------- ----- ----------- ----- ------------- -------- ----------------- ------- - ---------- - ------------------ ------ ------------ - - ---- --------------- ------ - - ---------- - -- - ------ -------- ----- --------- ----- ------------ ------- - -- --------- -- ----------- - ----------- ----- - ----------- - ----------- ----- -------- ---- -- - ---------- - ----------- ----- ------------- ----- ------------ -------- -
下面我们逐步解释以上CSS代码中的关键部分。
flex-container容器样式
容器样式代码如下：
.flex-container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
}这些设置创造了一个flex容器，允许子项在此容器中弹性排列以保持网页自适应。容器的子项的可伸缩性是通过在容器的flex子项中控制伸展性来完成的。
display:flex - 将元素的显示属性设置为弹性 flex 布局。
flex-wrap:wrap - 当空间不足时允许元素换行显示，创造类似于下文的“拼图块”效果。
align-items:stretch - 容器内部所有项目的高度相等，根据左上角的参考坐标对齐。
justify-content:center - 让容器内所有的子元素在容器的中心排列，X轴方向对齐（为了保持网页自适应，不涉及对宽度的对齐）。
Flex-item样式
下面是flex-item元素的样式：
.flex-item {
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,.1);
flex: 0 0 calc((100% / 3) - 20px);
margin: 10px;
padding: 10px;
text-align: center;
}background-color:white - 为当前的块设置背景为白色。
box-shadow:0 0 10px rgba(0,0,0,.1) - 设置创造样式，使其显得更像拼图块，同时要将阴影尽量减小，不影响它的整体设计。
flex:0 0 calc((100% / 3) - 20px) - 通过灵活的伸缩机制使每个板块呈现等高的样式，且最好的适应方法是将屏幕宽度分割为3段。flex-grow:0;flex-shrink:0;width:calc(100% / 3 - 20px);可以使这一结果得以实现。
margin:10px;padding:10px - 设置块元素的边距（margin）和内边距（padding）。
上述设置实际上实现了与所想仿照的Pinterest网站相似的动态UI效果。
结论
Flexbox布局是一个令人兴奋且令人遗憾的功能，它非常容易学习，却同时拥有巨大的潜力。使用CSS Flex布局，我们可以在图像排版和页面缩放等各种方面创造出更好的用户体验。能够实现瀑布流效果的案例一直是前端开发人员感兴趣的UI设计。通过本文，我讲解了使用CSS Flexbox实现等高动态布局的相关细节和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751700b8bd460d3ad89b39b