弹性盒子
1、弹性盒子与弹性元素
（弹性盒子不脱标）
- 弹性盒子：指的是使用display：flex或display：inline-flex声明的容器。
- 弹性元素：指的是弹性盒子中的子元素。
- 主轴与侧轴（交叉轴）
主轴方向：为子元素排列的方向。可以通过flex-direction改变。
侧轴方向：与主轴方向垂直，为子元素的换行方向。可以通过flex-wrap改变。
【注】
1.文本节点也可以被弹性布局操作。
2.绝对定位的元素不参与弹性布局。（脱标）
2、弹性盒子的声明
- 声明定义：
使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。
【注】
1、 （给容器定义为弹性盒子后，弹性盒子内的子元素会自动从左向右横向排列。）
2、一般是使用display:flex。 inline-flex极少用。
flex:如果没有为父元素设置宽，则父宽默认为100%；
inline-flex：如果没有为父元素设置宽，则父宽默认为所有子元素的宽的和。
3、弹性盒子的属性（父元素的属性）
（1）、flex-direction
- flex-direction： 用于设置弹性盒子中的子元素的排列方向。（水平方向排列还是垂直方向排列）
- 属性值：
row 从左到右水平排列子元素（默认值）
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素
（2）、 flex-wrap
- flex-wrap： 规定flex容器是单行还是多行，是否换行。
nowrap:不换行（默认值）。即单行，该情况下，flex子项可能会溢出容器。
wrap：换行
wrap-reverse 反向换行。
（3）、 flex-flow
flex-flow： 是flex-direction与flex-wrap的组合写法。
flex-flow:flex-direction属性值 flex-wrap属性值；
（4）、 justify-content
- justify-content：用于控制弹性元素在主轴上的排列方式。
（主轴方向可能是横向或纵向） - 当主轴方向是横向时（即flex-direction值为row时）
flex-start ：左对齐 。（默认值）-------------------元素紧靠主轴的起点
flex-end ：右对齐。----------------------------------- 元素紧靠主轴的终点。
center ：居中对齐。-----------------------------------元素在主轴上居中。
space-between 两端对齐，项目之间间隔相等。--------------------------第一个元素紧靠起点，最后一个元素紧靠终点，余下的元素平均分配剩余空间。
space-around ：每个元素两侧的间隔相等。---------元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 。元素间距平均分配。 - 图例·：
1、 flex-start ：左对齐
2、 flex-end ：右对齐
3、center ：居中对齐
4、space-between 两端对齐
5、space-around
6、space-evenly
（5）、 align-items
-
align-items：控制元素在侧轴上的排列方式。
多行单行都适用的属性。 -
属性值：
flex-start 从侧轴开始的地方对齐（默认值）
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 。当子元素没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。 -
图例：
1、flex-start
2、flex-end
3、center
4、stretch
（6）、align-content
- align-content： 控制元素在侧轴上的排列方式。
只适用于多行显示的弹性容器。
flex-start ： 元素紧靠行的起点
flex-end ：元素紧靠行的终点
center ： 元素在行中居中
stretch ： 拉伸
space-between ：第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
space-around ：元素在侧轴方向上的间隔相等。
space-evenly ：元素间距离平均分配
（7）、align-self（弹性元素的属性，设置子元素）
- 弹性元素：
不要再去设置float。
设置完绝对定位后，该元素就不再是弹性元素了，不参与弹性布局。（绝对定位后会脱标）
弹性元素均为块级元素。 - align-self： 用于控制单个元素在侧轴上的排列方式。
- 属性值：
flex-start
flex-end
center
stretch 拉伸
<title>Document</title>
<style>
.father{
width: 300px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row wrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
}
.son:nth-child(4){
/* align-self: flex-end; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
<div class="son">4
</div>
</div>
</body>
当不给第四个子元素align-self：flex-end时，所有子元素会遵循弹性盒子的设置（横向排列，换行）
当再单独给第四个子元素设置align-self：flex-end时，运行结果如下图：
4、弹性盒子空间分配（设置给弹性元素）
（1） flex-grow
flex-grow：用于将弹性盒子的可用空间，按照比例分配给弹性元素。
<style>
.father{
width: 400px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row wrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
flex-grow: 1;
}
.son:nth-child(2){
background-color: cadetblue;
flex-grow: 2;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
上面代码
1、显示弹性盒子总宽400px。
2、三个弹性元素宽各100px。则剩余可分配空间为100px。
3、三个弹性元素剩余空间的可分配比例为1:2:1。
计算得知：
1、第一个弹性盒子可分配的宽度为100px/41=25px
最终宽度为100px+25px=125px
2、第二个弹性盒子可分配的宽度为100px/42=50px
最终宽度为100px+50px=150px
3、第三个弹性盒子可分配的宽度为100px/4*1=25px
最终宽度为100px+25px=125px
（2） flex-shrink
flex-shrink： 在弹性盒子装不下子元素时，对子元素缩小的比例设置。
<style>
.father{
width: 200px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: row nowrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
line-height: 100px;
text-align: center;
flex-grow: 1;
}
.son:nth-child(2){
width: 80px;
background-color: cadetblue;
flex-shrink: 2;
}
</style>
</head>
<body>
<!-- flex-shrink
在弹性盒子装不下子元素时，对子元素缩小的比例设置。
1.计算缺少的值。
2.当前元素应该缩小比例：80*2/(100*1+80*2+100*1)=44.4%
3.应该缩小的值：缺少的值*缩小的比例=80*44.4%=35.6px
4.最终尺寸：缺少的值-应该缩小的值 80-35.6=44.4px；
-->
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
代码显示信息
1、弹性盒子总宽200px。
2、弹性元素1与弹性元素3宽各100px，弹性元素2宽80px。弹性盒子缺少的宽度为80px。
3、弹性元素2的flex-shrink值为2.弹性元素1与3flex-shrink默认为1.
计算得知：
1、则弹性元素2应缩小比例：802/(1001+802+1001)=44.44%
2、弹性元素2应缩小的值：缺少的值缩小的比例=8044.44%=35.55px
3、弹性元素2最终宽度：缺少的值-应该缩小的值 80-35.55=44.45px
4、弹性元素1与3的最终宽度
（1）弹性元素1与3的的应缩小比例：1001/（1001+802+1001）=27.78%
（2）弹性元素1与3的的应缩小值， 缺少的值缩小的比例 80px27.78=22.22px
（3）弹性元素1与3的最终宽度：100px-22.22px=77.78px
（3） flex-basis
flex-basis：大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。
（4） 复合写法
复合写法：
flex：flex-grow flew-shrink flex-basis
（5）属性order
order:
用于控制弹性元素的位置。默认为0，数值越小越靠前。
<style>
.father{
width: 300px;
height: 300px;
margin: 0 auto ;
margin-top: 50px;
border: 1px solid seagreen;
display: flex;
flex-flow: column nowrap;
}
.son{
width: 100px;
height: 100px;
background-color: sienna;
background-clip: content-box;
box-sizing: border-box;
font-size: 30px;
/* line-height: 100px; */
text-align: center;
}
.son:nth-child(2){
width: 100px;
background-color: cadetblue;
flex-basis: 80px;
/* flex: 2 1 80px; */
/*
flex-grow:2;
flex-shrink:1;
flex-basis:80px;
*/
order: -2;
}
</style>
</head>
<body>
<!-- flex-basis
大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。
复合写法：
flex：flex-grow flew-shrink flex-basis
order:
用于控制弹性元素的位置。默认为0，数值越小越靠前。
-->
<div class="father">
<div class="son">1
</div>
<div class="son">2
</div>
<div class="son">3
</div>
</div>
</body>
弹性元素2的order值为-2，位置跑到最前面。
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
