完成css3的盒模型流式布局事例分享

     在进修css3的过程中，发现一些新界说的内容和属性老是一知半解，无法很好的把握，之后就进修做这个流掉结构，发现若是运用好很轻易完当作比力纪律的盒子结构，所以这里分享一下本身做流式结构的过程；

东西/原料

• 电脑
• Sublime text 2

方式/步调

1. 1

   既然是纪律的节制盒子模子，那么年夜量的 div 是不错的例子应用 元素，初始做的时辰，就分为了 年夜 中 小，由中 div 作为父元素容器，之后节制下面的子元素 div  实现结果；

   
2. 2

   我们先节制 年夜 div  的样式，完当作根本的页面结构，不仅要有用果，必然的美不雅也是需要的，如图二，就是我们存放和展示 流式结构  的容器；样式代码可以看图一；

   
3. 3

   这里 span 标签零丁拿出来是为做标识表记标帜，三个中 div 中的 小 div 个数分歧，以span作为距离和标识表记标帜

   
4. 4

   然后我们节制 中 div  ，需要的样式就不做诠释了；

   display：flex；将元素作为弹性伸缩盒；

   flex-flow;伸缩流偏向与换行；

   align-content;多行子项在容器内垂直对齐体例；

   
5. 5

   节制 小 div，高度 height，边框 border，布景色 background-color；

   关头的

   box-sizing：border；（ 感受就是把宽度和高度设置为不异的数值，可是还有良多细节，大师最好查资料）

   flex：0 0 25%；（节制该元素的伸缩性）

   

注重事项

• 仅作分享；