响应式网站中弹性布局怎么实现（带你秒懂弹性布局原理）

目前网站建设中的响应式布局是前端工程一个非常具有意义的里程碑。它强大的可塑性、灵活的布局方式实现了网站在不同终端设备上的自动匹配，展现了旺盛的活力。而实现响应式通常有 一些方法，今天就跟大家探讨一下实现响应式布局方法中的弹性布局。

第一，什么是弹性布局

弹性布局是一种网站建设中实现响应式布局的方法，这种布局方法只需要依赖于CSS样式，使用起来非常方便，所以也是多用到的一种实现响应式的方法。尤其是现在类似于电商web站或者手 机app的页面，使用弹性布局可以非常轻松地实现响应式布局。特别是在小图标排列或是频繁划区的时候，弹性布局就显得十分的便利。

第二，弹性布局属性关系通俗讲解

弹性布局flex是CSS中display的一个属性值，通过在父容器上添加display:flex; 属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添 加这一属性的父容器和非隔代子容器上，换句话说，父容器上的diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗来讲，爹只能管得到自己的儿子、而管不到自己的 孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加display:flex; 属性来实现。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

在父元素上，我们经常会用到的有关弹性布局的属性主要有flex-direction、flex-wrap、justify-content、align-items、align-content，这几个属性分别从主轴的方向、是否换行、项目 在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上，我们经常会用到的有关弹性布局的属性主要有order，flex-grow，flex-shrin广州网站建化,flex-basis，align-self，这几个属性分别从 项目的排序、项目放大比例、项目缩 小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

第三，弹性布局中要掌握的几个概念属性

1、主轴与交叉轴

在弹性布局中，主轴及主轴的方向取决于flex-direction属性的属性值，它可以是在水平方向上，也可以是在垂直方向上，既可以是正向，也可以是反向，在这里，初次接触这一概念的朋友 们要注意了，千万不要单单把“主轴”与“水平正向”划等号，虽然说在CSS中规定的默认值是这样的。而交叉轴表示的就是与主轴垂直的那条轴线。

2、基线

在弹性布局中，还提到了“基线”这个词，基线是指字母x的下端沿。而许多属性值所谓的baseline对齐方式就是指沿一行中小写x的低端线对齐，就好像一直有那么一个模板在比对者一样。

3、多交叉轴线

多交叉轴线是在flex-wrap属性设置为wrap后可能出现的一种情况，即父容器中出现了多行的排列，而每一行都有其各自的轴线。

总结，弹性布局是实现网站建设响应式布局过程中的一种常用方法，弄懂了他的工作原理和一些关键的概念，做到心中有数，我们在建站时就可以灵活自如地去运用而不会抓瞎。今天的分享 就到这里如果有问题可以留言一起探讨。