CSS3弹性盒⼦（FlexBox）flex布局总结弹性盒⼦内容
弹性盒⼦由弹性容器(Flex container)和弹性⼦元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了⼀个或多个弹性⼦元素。
注意：弹性容器外及弹性⼦元素内是正常渲染的。弹性盒⼦只定义了弹性⼦元素如何在弹性容器内布局。
弹性⼦元素通常在弹性盒⼦内⼀⾏显⽰。默认情况每个容器只有⼀⾏。
弹性盒⼦属性
1.display 指定HTML元素盒⼦类型
display: flex; 设置为flex弹性盒⼦布局
2.flex-direction 指定了弹性盒⼦中⼦元素的排列⽅式。flex-direction的值有：
row 横向从左到右排列，默认排列⽅式
row-reverse 反转横向排列，最后⼀项排在最前⾯
column 纵向排列
column-reverse 反转纵向排列，最后⼀项排在最上⾯
3.justify-content 设置弹性盒⼦元素在主轴⽅向上的对齐⽅式。justify-content的值有：
flex-start 默认值。项⽬位于容器的开头
flex-end 项⽬位于容器的结尾
center 项⽬位于容器的中⼼
space-between 项⽬位于各⾏之间留有空⽩的容器内
space-around 项⽬位于各⾏之前，之间，之后都留有空⽩的容器内
4.align-items 设置弹性盒⼦元素在侧轴⽅向上的对齐⽅式。align-items的值：
flex-start 元素位于容器的开头。起始位置紧靠住该⾏的侧轴起始边界
flex-end 元素位于容器的结尾。起始位置紧靠住该⾏的侧轴结束边界
center 元素位于容器的中⼼。弹性盒⼦元素在该⾏的侧轴上居中放置。若该⾏的尺⼨⼩于弹性盒⼦元素尺⼨，则会向两个⽅向溢出相同的长度 stretch 默认值。元素被拉伸以适应容器。若指定侧轴⼤⼩的属性值为auto，则其值会使项⽬的边距盒的尺⼨尽可能接近所在⾏的尺⼨，
但同时会遵照'min/max-width/height'属性的限制。
baseline 元素位于容器的基线上，如弹性盒⼦⼦元素的⾏内轴与侧轴为同⼀条，则该值与’'flex-start'等效。其它情况下，该值将参与基线对齐。
5.flex-wrap 设置弹性盒⼦的⼦元素超出⽗容器时是否换⾏。flex-wrap的值：
nowrap 默认，弹性容器为单⾏。该情况下弹性⼦项可能会溢出容器。
wrap 弹性容器为多⾏，该情况下弹性⼦项溢出的部分会被放置到新⾏，⼦项内部会发⽣断⾏
wrap-reverse 反转 wrap 排列
6.align-content 修改flex-wrap属性的⾏为，类似align-items，但不是设置⼦元素对齐，⽽是设置⾏对齐。align-content的值有：
stretch 默认。各⾏将会伸展以占⽤剩余的空间
flex-start 各⾏向弹性盒容器的起始位置堆叠
flex-end 各⾏向弹性盒容器的结束位置堆叠
center 各⾏向弹性盒容器的中间位置堆叠
space-between 各⾏在弹性盒容器中平均分布
space-around 各⾏在弹性盒容器中平均分分布，两端保留⼦元素与⼦元素之间间距⼤⼩的⼀半
7.flex-flow flex-direction 和 flex-wrap 的简写
例：flex-flow: row wrap;
8.order 设置弹性盒⼦的⼦元素排列顺序
order: number;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main {
width: 400px;
height: 150px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div {
width: 70px;
height: 70px;
}
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
</style>
</head>
<body>
<div id="main">
<div id="myRedDIV"></div>
<div id="myBlueDIV"></div>
<div id="myGreenDIV"></div>
<div id="myPinkDIV"></div>
</div>
</body>
</html>
9.align-self 在弹性⼦元素上使⽤。覆盖容器的 align-items 属性（⽤于设置弹性元素⾃⾝在侧轴⽅向上的对齐⽅式）
flex布局详细讲解 auto 如果align-self的值为auto，则其计算值为元素的⽗元素的align-items值，如果其没有⽗元素，则计算值为stretch
flex-start 弹性盒⼦⼦元素的侧轴起始位置的边界紧靠住该⾏的侧轴起始边界
flex-end 弹性盒⼦元素的侧轴起始位置的边界紧靠住该⾏的侧轴结束边界
center 弹性盒⼦元素在该⾏的侧轴上居中放置（如果该⾏的尺⼨⼩于弹性盒⼦元素的尺⼨，则会向两个⽅向溢出相同的长度）
baseline 如弹性盒⼦元素的⾏内轴与侧轴为同⼀条，则该值与flex-start等效，其他情况下，该值将参与基线对齐
stretch 如果指定侧轴⼤⼩的属性值为auto，则其值会使项⽬的边距盒尺⼨尽可能接近所在⾏的尺⼨，但同时会遵照min/max-width/htight属性的限制
⽰例：将第⼆个⿊⾊的⽅块放在右下⾓
.parent{
background-color: pink;
width: 100px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
.children{
background-color: black;
margin: 2px;
width: 20px;
height: 20px;
}
.children:nth-child(2){
align-self: flex-end;
}
}
10.flex 设置弹性盒⼦的⼦元素如何分配空间
11.flex-basis 设置或检索弹性盒⼦伸缩基准值
number ⼀个长度单位或⼀个百分⽐，规定灵活项⽬的初始长度
auto 默认值。长度等于灵活项⽬的长度。如果该项⽬未指定长度，则长度将根据内容决定。
initial 设置该属性为它的默认值
inherit 从⽗元素继承该属性
.parent {
width: 100%;
height: 100%;
display: flex;
.children {
width: 20px;
height: 50px;
}
}
/*设置第⼆个弹性盒元素的初始长度为 80 像素*/
.children:nth-child(2) {
flex-basis: 80px;
}
12.flex-grow ⽤于设置或检索弹性盒⼦的扩展⽐率
number ⼀个数字，规定项⽬相对于其他灵活的项⽬进⾏扩展的量
initial 该属性为它的默认值
inherit 从⽗元素继承该属性
/*
当⽗元素的宽度⼤于⼦元素之和时，flex-grow 会分享剩余的空间，通过 flex-grow 的值来进⾏分配
最初每个⼦元素宽度都是 40 ，第1，3分享了1份，第⼆个div分享了2份，最终宽度为 60 80 60
*/
.parent {
width: 200px;
height: 100%;
display: flex;
.children {
width: 40px;
height: 50px;
}
}
/*让第⼆个元素的宽度为其他元素的2倍：*/
.children:nth-child(1) {
flex-grow: 1;
}
.children:nth-child(2) {
flex-grow: 2;
}
.children:nth-child(3) {
flex-grow: 1;
}
13.flex-shrink 指定了flex元素的收缩规则。flex元素仅在默认宽度之和⼤于容器的时候才会发⽣收缩， 其收缩的⼤⼩是依据 flex-shrink 的值.
number ⼀个数字，规定项⽬将相对于其他灵活的项⽬进⾏收缩的量
/*
⽗元素的宽度是300，⼦元素的宽度是100，总的宽度就是400。宽度超出100，
定义的第⼆个⼦元素的收缩值为 3，默认为1，总共就是6，⼀份相当于 100/6
则第 1，3，4 收缩 100/6，第⼆个元素收缩 (100/6) * 3
*/
.parent {
width: 300px;
height: 100%;
display: flex;
.children {
width: 100px;
height: 100px;
flex-shrink: 1;/*默认值 1*/
}
}
.children:nth-child(2){
flex-shrink: 3;
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论