用jsp做网站有什么好处/打广告去哪个平台
传统的盒子模型布局，要使用display+position+float等属性相结合，十分的复杂。就比如要实现一个垂直水平都居中的局部，就很麻烦
因此引入了弹性布局的概念
在解释flex常用的布局属性之前，首先应该要先搞明白，在我们写了display：flex后意味着什么.
采用flex的元素简称为容器，而在这个容器内的元素被称为项目
在flex布局中，有着两条特殊的线，分别叫做主轴和副轴.默认的主轴就是x轴，也就是水平方向上的，而另一条自然就叫做副轴，也就是y轴
下面的解释都以这张图为例
常用的flex布局属性
容器属性
flex-direction
这个属性是用于指定在该容器中的项目的主轴是什么样的,根据主轴的开始位置和结束位置排好
flex-direction:row
flex-wrap
这个属性是用于指定在该容器中的项目如果超过了该主轴的总长度，是否需要换行
它的格式为flex-wrap:wrap
flex-flow
这是上面两个属性的简写形式，会它就可以不需要一下子写两个属性了,它的格式为flex-flow:row wrap
justify-content
这就是重头戏了，他能直接设置项目的对齐方式，可以居中对齐，可以分散对齐，可以靠左或靠右对齐。其实还挺像word中的设置文本对齐方式的
它的格式为justify-content:center
align-item
这是设置一根副轴上的项目对齐方式，如果你主轴为x轴，那么副轴就是y轴，反之亦然。它根据副轴的开始位置和结束位置排好
它的格式为align-item:center
但是要注意这个属性只对一根副轴线起效
align-content
这是设置多根轴线上的项目对齐方式
它的格式为align-item:center
项目属性
flex-grow
它定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
就是如果一个容器大小为300，那么你在一个项目里写flex-grow:1，在另一个项目里写flex-grow:1,它们的宽度就是150，如果前一个写2,后一个写1,拿前一个宽度为200,后一个为100.
如果一个项目设置了flex-grow:1，而另一个也在该容器中的项目没有设置。那么前一个会把除那个项目以外的剩余空间全部占满
flex-shrink
它定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
同flex-grow，用其一即可
flex-basis
flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
有了它，就可以不在弹性布局的元素中使用width了，它的作用差不多就是width的作用,给项目指定宽度
flex
是上面三个属性的简写.它的格式为flex:1 1 100%
一般来说，写flex:1就可以实现让一个项目按比例分配大小了
下面给两个flex布局的经典实例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css"> .playBox{display: flex;flex-flow: row wrap; align-content: space-between;width: 150px;height: 150px;background-color: whitesmoke;}.playBox .column{flex: 1 1 100%;display: flex;justify-content: space-between;}.playBox .column .dot{width: 25px;height: 25px;background-color: #000000;border-radius: 75px;}.playBoxtwo{display: flex;flex-flow: row wrap;align-content: space-between;width: 150px;height: 150px;background-color: whitesmoke;}.playBoxtwo .column{flex:1 0 100%;display: flex;flex-flow: row wrap;justify-content: space-between;}.playBoxtwo .column .dot{width: 25px;height: 25px;background-color: #000000;border-radius: 75px;}</style></head><body><div class="playBox"><div class="column"><div class="dot"></div><div class="dot"></div></div><div class="column"><div class="dot"></div><div class="dot"></div></div></div><br><div class="playBoxtwo"><div class="column"><div class="dot"></div><div class="dot"></div></div><div class="column"><div class="dot"></div><div class="dot"></div></div><div class="column"><div class="dot"></div><div class="dot"></div></div></div></body>
</html>
圣杯布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box{display: flex;flex-flow: column wrap;height:500px;}.header{flex: 1;display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #B4BCCC; }.header>span{font-size: 25px;color: white;}.content{ flex: 6;display: flex;flex-direction: row;height: 500px; }.content .left{flex: 1;display: flex;align-items: center;justify-content: center;background-color: #0077AA;}.content .center{flex: 2;display: flex;align-items: center;justify-content: center;background-color: #ECECEC;}.content .right{flex: 1;display: flex;align-items: center;justify-content: center;background-color: coral;}.footer{flex: 1;display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #B4BCCC; }.footer>span{font-size: 25px;color: white;}</style></head><body><div class="box"><div class="header"><span>#header</span></div><div class="content"><div class="left"><span>#left</span></div><div class="center"><span>#center</span></div><div class="right"><span>#right</span></div></div><div class="footer"><span>#footer</span></div></div></body>
</html>flex布局其实并不难，但是它偏偏是几行代码就能实现我们想要的效果，所以flex布局必然是未来布局的首选方案
如有不足，还望指正