flex学习笔记-CSDN博客

由于公司项目，一直需要支持ie9；导致作为5年的前端，居然对flex不是熟记于心，不得不二次学习下，（虽然之前学过，写过demo,但长时间不用，忘了，唉唉唉）

记住flex 布局核心是，弹性，抛弃了 display position float的布局方式；

1. 首先容器明确他的2个轴 main axis / cross axis
2. 父容器有6个属性：(排列方向换行主轴/交叉轴/多根轴对齐方式 )

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

3. 子容器的6个属性：（顺序放大缩小主轴空间综合子容器沿交叉轴（覆盖align-items））
order flex-grow flex-shrink flex-basis flex align-self

父容器常见的属性：值

主轴方向：
flex-direction： row/row-reverse/column/column-reverse
换行方式：
flex-wrap：nowrap/wrap/wrap-reverse
主轴与换行：
flex-flow:row nowrap
主轴的对齐方式：
justify-content:flex-start/flex-end/center/space-between/space-around
交叉轴的对齐方式：
align-items:flex-start/flex-end/center/baseline/stretch
多行沿交叉轴对齐：
align-content：flex-start/flex-end/center/space-between/space-around/stretch

子元素常见的属性和值

order:0; 默认顺序
flex-grow:0 /1/2/10/....

当空间多余时，将多余的空间，按照放大比例去放大。
例如
当3个子元素的该值分别是1 3 无；多出100px，
则分别在各自的宽高上增加100*1/(1+3) 75px 0;
当空间不足时，该值失效，会按照各自原本的宽高比例去缩放
例如
当3个子元素的该值分别是1 3 无;各自宽度是50 ,200 50 ，总宽是200;
则最终是200*50/(50+200+50),200*200/(50+200+50),200*50/(50+200+50)

flex-shrink:1/5/..

当空间不足时 不足的空间，由子元素通过收缩因子去减小
例如：当3个子元素的该值分别是1 3 没设置;各自宽度是50 ,200 50 ，父总宽是200;
则分别是50-100*50*1/(1*50+3*200+1*50);
200-100*200*3/(1*50+3*200+1*50);
50-100*50*1/(1*50+3*200+1*50);;
当空间多余时，该值失效 无意义。

flex-basis:auto/25%/50px/...

flex-basis 规定的是子元素的基准值。初始长度。所以是否溢出的计算与此属性息息相关。

应用准则：
content –> width –> flex-basis (limted by max|min-width)
flex-basis与width同在时，以flex-basis为准。
建议使用flex-basis，而非直接给定width
但max-width min-width能限制flex-basis。
即：flex-basis: 250px; max-width: 100px; 最终宽度会是100px；
即：flex-basis: 100px; min-width: 250px; 最终宽度会是100px；

}

注意：
有flex-basis，有宽高，没设置flex-shrink。flex-grow，空间不足或多余时，都以该值为准，不收缩，也不扩张。
空间不足时，有flex-shrink,且有宽度,以flex-basis为基准，去计算不足的空间

flex:0 0 100%
align-self：**,取代align-items;item有自己独特的在交叉轴上的对齐方式

不容易理解的属性解释：
flex-basis :表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
flex-wrap：设置换行方式,决定子容器是否换行,顺序换行还是支持逆序换行。
align-content:多行沿交叉轴对齐：当子容器多行排列时，设置行与行之间的对齐方式。

细讲下flex

flex 是 flex-grow、flex-shrink、flex-basis的缩写
flex 的默认值是 0 1 auto。
当 flex 取值为 none，则计算值为 0 0 auto，
当 flex 取值为 auto，则计算值为 1 1 auto，
当 flex 取值为 1，则计算值为 1 1 0%，
当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：
当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，
当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，
flex:24px; // 1 1 24px
flex:0%; // 1 1 24px
flex:2 ; // 2 1 0%
flex:2 3; // 2 3 0%
flex:2 20%; // 2 1 20%

demo

用flex 写一个圣杯布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-圣杯布局</title>
    <style type="text/css">
.Grid{
  width:100%;
  display: flex;
  flex-direction:column;
   min-height: 100vh;
} 
.main{
    flex:1;
    display: flex;
}
.header,.footer{height:100px;}

.aa{flex:1;}
.aa1,.aa3{ width:10vw;}
.aa2{ width:25%;}
.aa0{width:50% }
    </style>
 

</head>
<body>
   
  <div class="Grid">
          <div class="header">
              <div class="aa aa0">12</div>
               <div class="aa aa1">34</div>
               <div class="aa aa2">56</div>
          </div>
          <div class="main">
              <div class="aa1">ddd</div>
              <div class="aa">.gg.</div>
              <div class="aa">..gg.</div>
              <div class="aa3">..gg.</div>
          </div>
          <div class="footer">..fgfgfg.</div>
</div>
</body>
</html>