flex布局笔记

这篇笔记是在读完阮一峰老师的flex语法和{前端开发}的flex设置成1和auto有什么区别的两篇博客后本身记录的布局思想和遇到的问题。
附上连接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
http://www.javashuo.com/article/p-rxguzxpa-v.html

1.容器属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

Flex-flow是direction和wrap的简写。

通常默认关注direction，不关注wrap，wrap通常都是换行的。

2. 肯定主轴和肯定主轴上的项目排列

而direction就是肯定主轴，有row,column还有他们的reverse。也就是横着竖着还有他们的倒着。

主轴肯定了下一步能够肯定他们的项目在主轴用什么样的格式排列在主轴上（左右向）前提主轴是row，若是主轴是column，则相反

因此就有justify-content这个属性，不展开了，五个属性能够看阮老师的文章。

3.肯定轴的对齐方式

用align-content这个属性，一样有五个，他们能够在主轴不惟一的时候让主轴们看起来不同，让他们大块的动。

4.肯定主轴项目的上下方向的格式(项目交叉轴上的格式)

align-items这个属性，让项目在上下方向的进行格式的操做。（默认主轴是row，也就是主轴是横向的，若是是column则相反）不展开说了。

5.肯定项目的属性

order这个属性不是很重要，由于通常排序的话在html直接作出来了，没必要要拿到css排序。

项目变大缩小还有基础大小(暂时叫基础大小)的三个属性flex-grow,flex-shrink,flex-basis

默认值是0，1，auto

关于grow和shrink来讲，只须要关注他们在父组件大小中是否有余地或者没有余地时会不会变换宽度便可，变换的话就是1，不变的话就是0。

对于basis这个属性，默认是auto。阮老师给出的结论是在分配多余空间以前，项目占据的主轴空间，因此也就是说basis是在父组件有多余的地方的时候配合grow才会显出做用的。

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>
<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        flex: 2 1 0%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 0%;
        background: lightblue;
    }
</style>

假设由上面这三个结构他们的basis都是0%，他们的flex-grow为2,2,1。

如今进行三个步骤来计算他们最终要占多大地方

• 计算三个子组件basis的合

  • 都是百分之0，那合就是0px

• 计算剩余的分配空间

  • 父组件是600px，三个子组件的basis之和为0，因此剩余可分配的就是600-0=600px

• 分配剩余空间

  • Item1 = (600/5*2)=240
  • Item2 = (600/5*2)=240
  • item3= (600/5*1)=120

  他们基础都为0，因此他们最后的宽度为240，240，120

那么其余配置不变，item-1 width=140px，item-2的basis变成auto，width=100px。item-3的basis变成200px；

<style type="text/css">
    .parent {
        display: flex;
        width: 600px;
    }
    .parent > div {
        height: 100px;
    }
    .item-1 {
        width：140px;
        flex: 2 1 0%;
        background: blue;
    }
    .item-2 {
        width：100px;
        flex: 2 1 auto%;
        background: darkblue;
    }
    .item-3 {
        flex: 1 1 200px;
        background: lightblue;
    }
</style>

则仍是按照刚才的三部走

• 计算三个子组件basis的合
  • Basis为0%，auto，200px。那么item-1的就变成0px,item-2的变成了100px，和原尺寸同样，item-3的为200px.则他们的合为300px.
• 计算剩余的分配空间
  • 600-300=300px
• 分配剩余空间
  • item-1分配到300/5*2=120
  • item-2分配一样为120
  • item-3分配到60
• 他们基础分别为0，100，200。加上他们分配到剩余的就为120，220，260

6.flex的简写

//不写flex
flex: 0 1 auto;

//flex:none;
flex: 0 0 auto;

//flex:auto;
flex: 1 1 auto;

//flex:1;
flex:1 1 0%;

//flex: 0%;
flex:1 1 0%;

//flex:24px;
flex:1 1 24px;

//flex: 2 3;
flex: 2 3 0%;