flex布局

为啥要有flex布局？

一个原因是传统实现元素居中太艰难，绕的路太多。

举个例子

<style>

#son1 {
    width:100px;
    height:100px;
    background:pink ;
}
#son2 {
    width:100px;
    height:100px;
    background:green ;
}
</style>

<div id="dad">
    <div id="son1">son1</div>
    <div id="son2">son2</div>
</div>

结果是

image.png

justify-content用于对齐元素

在上述代码添加

#dad {
    display:flex;
    justify-content:flex-start;
}

结果就是左对齐

image.png

justify-content:这个center就是居中对齐
flex-end就是右对齐。
还有个space-around 就是元素均匀分布

image.png

space-between两端挨着边缘了

image.png

align-items

试想这么一种情况
如何可以按照下面的线对齐？

image.png

这么设置dad的style

#dad {
    display:flex;
    align-items:center
}

结果是

image.png

若是

#dad {
    display:flex;
    align-items:flex-start;
}

结果是

image.png

#dad {
    display:flex;
    align-items:flex-end;
}

结果是

image.png

再比如

#dad {
    display:flex;
    justify-content:center;
    align-items: center;
}

结果

image.png

总结

justify-content 属性用于定义如何沿着主轴方向排列子容器。
align-items 属性用于定义如何沿着交叉轴（纵轴）方向分配子容器的间距。类似上对齐，下对齐，

so easy！