flex布局

弹性布局：用来为盒状模型提供最大的灵活性

flex容器属性

flex-direction

(主轴,另一个轴线为交叉轴垂直于它): row|row-reverse|column|column-reverse

值	描述
row	默认值，沿着inline方向延伸
row-reverse	沿着inline方向延伸，但是起始线和终止线位置会交换
column	沿着block方向即上下方向延伸
column-reverse	沿着block方向即上下方向延伸，但是起始线和终止线位置会交换

flex-wrap

决定是否换行

值	描述
nowrap	默认值，不换行
wrap	如有必要时，换行
wrap-reverse	如有必要时，以相反的顺序换行

flex-flow

flex-direction 和 flex-wrap 组合为简写属性flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap

justify-content

元素在主轴的对齐方式

属性值	描述
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	每个元素的左右空间相等，每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
space-between	元素之间间隔相等（间距只在弹性盒子之间）
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等（所有地方的间距都相等）

align-items

元素在交叉轴上的对齐方式

属性值	作用
flex-start	默认值，flex 元素按 flex 容器的顶部对齐
flex-end	按 flex 容器的下部对齐
center	沿交叉轴轴居中对齐
stretch	默认值，弹性盒子沿着交叉轴被拉伸至铺满容器

align-content

只适用多行的flex容器，它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体

属性值	作用
flex-start	所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end	所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐
center	所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
space-between	所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
space-around	所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
space-evenly	所有行沿垂直轴均匀分布在对齐容器内。每对相邻的项之间的间距，主开始边和第一项，以及主结束边和最后一项，都是完全相同的。
stretch	拉伸所有行来填满剩余空间。剩余空间平均地分配给每一行

flex元素上的属性：

order

项目的顺序：顺序越小，排列越靠前，必须是数字，默认为0

flex-grow

flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间，该值必须是数字，默认值是 0。

设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间

eg：如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4，另外两个元素各占有1/4

<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
.item1 {
width:100px
}
.item2 {
flex-grow: 1;
}

</style>
</head>
<body>
<div id="main">
  <div class="item1" style="background-color:coral;"></div>
  <div class="item2" style="background-color:lightblue;"></div>
</div>
</body>
</html>

flex-shrink

处理 flex 元素收缩的问题，子元素超出父元素宽度后，对应每个子元素的收缩规则

<head>
<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
.item {
width:300px
}
.item2 {
flex-shrink: 4;
}
</style>
</head>
<body>
<div id="main">
  <div class="item item1" style="background-color:coral;"></div>
  <div class="item item2" style="background-color:lightblue;"></div>
</div>
</body>

<html>
<head>
<style> 
    #main {
      width: 200px;
      height: 100px;
      border: 1px solid #c3c3c3;
      display: flex;
    }
    .item1 {
      flex: 3 2 50px;
    }
    .item2 {
      flex: 2 1 200px;
    }
</style>
</head>
<body>
<div id="main">
  <div class="item item1" style="background-color:coral;"></div>
  <div class="item item2" style="background-color:lightblue;"></div>
</div>
</body>
</html>

两个子元素的实际宽度大于父元素

所以第一个 flex-grow 不用管，只看第二个缩小的属性 flex-shrink

简要步骤如下：

计算超出父盒子的宽度：200+50-200 = 50

计算权重值 :利用每一个伸缩项需要的份数当前伸缩项的宽度然后再相加，50 $\times$ 2+200 $\times$ 1

计算每个伸缩项需要缩小的范围：溢出的宽度 $\times$ 当前伸缩项的宽度 $\times$ 当前伸缩项需要的份数 / 权重值

left需要减少：(50 $\times$ 2)/(50 $\times$ 2+200 $\times$ 1) $\times$ 50 = 50/3

right需要减少：(200 $\times$ 1)/(50 $\times$ 2+200 $\times$ 1) $\times$ 50 = 100/3

最终 left 宽度：50-50/3 = 100/3

最终 right 宽度：200-100/3 = 500/3

flex-basis

规定 flex 项目的初始长度

flex

lex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认为0 1 auto

flex：1 => flex-grow : 1; flex-shrink : 1; flex-basis : 0;

flex：200px => flex-grow ：1；flex-shrink ：1；flex-basis ：200px；

align-self

规定单个项目和其他项目不一样的对齐方式，可以覆盖