我们平时的布局，主要基于块和内联的属性进行浮动的布局，而flex与它们的原理并不相同。
task_1_10_1.png
我们先看大于640px的时候，可以看到每个元素都是上面的轴对齐，这个是flex的align-items属性。
假定我们的html
<div class="flex">
<div class="flex_item1">1</div>
<div class="flex_item2">2</div>
<div class="flex_item3">3</div>
<div class="flex_item4">4</div>
</div>
那么实现顶部对齐,那么使用flex-start,要实现中间对其，那么用center
.flex{
display:flex;
@media (min-width: 641px) {
align-items: center;
}
@media (max-width: 640px) {
align-items:flex-start;
}
然后我们发现，元素和元素之间，要等距离，于是加了justify-content的属性。
.flex{
justify-content:space-between;
@media (min-width: 641px) {
align-items: center;
}
@media (max-width: 640px) {
align-items:flex-start;
}
然后发现蓝色的调换了顺序,是order的属性。
.flex_item4{
@media (max-width: 640px) {
order: -1;
}
后面就是一些细节的属性啦。
下面的图片是浏览器兼容性
Paste_Image.png
参考资料
- 百度前端的任务十 关于flex的布局，下面的参考资料也来自这个任务
- Flexbox详解：了解 Flexbox 属性的含义
- 图解 CSS3 Flexbox 属性：看完这两篇，对 Flexbox 的了解就够了，多实践一下，理解会更深刻
- Flexbox——快速布局神器
- 使用 CSS 弹性盒
- MDN flex属性
来自百度前端的参考资料
I get 10 times more traffic from Google than from Yahoo or MSN.
