关于FLEX布局

我们平时的布局，主要基于块和内联的属性进行浮动的布局，而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.

关于FLEX布局

推荐阅读更多精彩内容