我最近在项目中用的比较多的还是flex布局，简单易用，功能强大
我们将一个元素的display属性设置flex，那么就可以将其转化为flex容器，但是，子元素的float，clear，vertical-align将会失效
举个例子： 在app项目中的顶部导航栏，我们进行了flex的布局，该导航栏分为 左 ，中 ，右 三个部分
首先，给组件的root（根）添加display：flex 属性，使其变成flex容器，
我们给左，右设置一个固定的宽度，然后只需要给中添加上flex：1 就可以了，这样就实现了一个简单的flex布局，
flex容器的属性： flex-direction: column； 将项目进行垂直显示，正如一个列一样
给子元素加上： flex-grow:1, 该子元素将会自动填充剩余空间
看下代码：
//css样式
.container { display: flex; flex-direction: column; height: 100vh; }
header,footer {
height: 100px;
background: #ccc;
}
main { flex-grow: 1; }
//dom标签
div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>
想要将一组图片链接均等的放在一条横线上，那么用flex就可以非常简单的实现，
首先我们设置一个flex容器， 就是给外层div添加一个 display：flex属性，设置宽度为100%，text-align：center
然后给子元素添加一个flex：1的属性，就可以了，我们将图片放入到子元素下就好了
代码：
.isd {
flex: 1;
}
.container {
width: 100%;
text-align: center;
display: flex;
}
.isd img{
width: 70px;
height: 65px;
margin-bottom: 6px;
border-radius: 100%;
}
<div class="container">
<div class="isd">
<img src="img/画图.jpg" />
</div>
<div class="isd">
<img src="img/画图.jpg" />
</div>
<div class="isd">
<img src="img/画图.jpg" />
</div>
<div class="isd">
<img src="img/画图.jpg" />
</div>
</div>
效果图：