1.拿到一张网页图片，首先要弄清应该如何进行布局，然后再开始写代码
2.css3的display:flex属性
在设计首页布局的时候，新认识了一种布局方式display:flex
1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 }
编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
基本概念
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main
start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main
size，占据的交叉轴空间叫做cross size。
以下6个属性设置在容器上：
- flex-direction 容器内项目的排列方向(默认横向排列)
- flex-wrap 容器内项目换行方式
- flex-flow 以上两个属性的简写方式
- justify-content 项目在主轴上的对齐方式
- align-items 项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
3.justify-content:space-around;项目位于各行之前、之间、之后都留有空白的容器内。定义和用法
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。
属性值
值 描述 测试 flex-start 默认值。项目位于容器的开头。 测试 » flex-end 项目位于容器的结尾。 测试 » center 项目位于容器的中心。 测试 » space-between 项目位于各行之间留有空白的容器内。 测试 » space-around 项目位于各行之前、之间、之后都留有空白的容器内。 测试 » initial 设置该属性为它的默认值。请参阅 initial。 测试 » inherit 从父元素继承该属性。请参阅 inherit。