flex布局笔记

这篇笔记是在读完阮一峰老师的《Flex 布局教程：语法篇》和{前端开发}的《flex设置成1和auto有什么区别》的两篇博客后自己记录的布局思想和遇到的问题。
附上链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.cnblogs.com/chris-oil/p/5430137.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;
         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;
         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%;