一，flex基本概念
问题一，什么是flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。且任何元素都可以成为flex容器，使其内部为flex布局。
块级元素：display: flex;
行内元素：display: inline-flex;
注意点：
01，Webkit 内核的浏览器，必须加上-webkit前缀。
02，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
问题二，什么又称作为flex布局中的项目
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
问题三，什么是主轴，什么又是侧轴
容器默认存在两根隐形的轴，在默认情况下：X轴为主轴，Y轴为侧轴；且两者的正方向为从左到右，从下到上。
注意点
01，默认项目永远在主轴上排列，排列方向为主轴的正方向，如图：
02，【仅限于新版flex，原因下述】若主轴的方向改变，则主轴【无论是X轴还是Y轴】与侧轴的相交基点也随之改变，如图：
问题四，既然都有了新版flex，并且新版本比老版本强大的多，那为什么还要了解新、老版本？
因为许多移动端的浏览器内核因为操作系统的原因，都版本超低
不支持新版本的display:flex，所以要了解老版本display:-webkit-box
二，新老版本的区别
老版本-webkit-box
容器
容器的布局方向
-webkit-box-orient: horizontal/vertical;控制主轴是X/Y轴
容器内部的排列方向【由容器控制】
-webkit-box-direction: normal/reverse;控制主轴的方向
normal：从左往右/从上往下
reverse：从右往左/从下往上
富裕空间管理
只决定富裕空间的位置，不会给项目区分配空间
主轴-webkit-box-pack
主轴是X轴
start：在右边 / end：在左边
center：在两边【item在中间】 / justifty：在项目中间【空白区域错分】
主轴是Y轴
start：在下边 / end：在上边【和主轴是X轴情况结合的话就是顺时针嘛】
center：在两边【item在中间】 / justifty：在项目中间【空白区域错分】
侧轴-webkit-box-align
侧轴是X轴
start：在右边 / end：在左边 / center：在两边【item在中间】
侧轴是Y轴
start：在下边 / end：在上边 / center：在两边【item在中间】
容器宽度不足处理机制
选择溢出【这里就是上述为什么指定的是flex，因为老版没有换行，所以就没所谓侧轴与主轴的基点之说】
项目
-webkit-box-flex
将富裕空间按比例分配到各个项目上去【富裕空间分配权重-webkit-box-flex:num】，如果主轴是Y轴就分配height,Z轴就是width
新版本flex
容器
容器的布局方向
容器内部的排列方向【由容器控制】
flex-direction控制主轴是X/Y轴，且控制主轴方向
row【列】：从左往右的X轴
row-reverse【列-反转】：从右往左的X轴
column【行】：从上往下的Y轴
column-reverse【列-反转】：从下往上的Y轴
富裕空间管理
只决定富裕空间的位置，不会给项目区分配空间
主轴justify-content
主轴是X/Y轴
flex-start：在右边 / flex-end：在左边 / center：在两边【item在中间】
space-between：在项目中间【空白区域错分】/ space-between 在项目两边
侧轴align-items/align-content
侧轴是X/Y轴
flex-start：在右边 / flex-end：在左边 / center：在两边【item在中间】
baseliine：基线对齐 / stretch：等高布局【item高度未设】
ps补充：flex-wrap换行
注意点
01，当容器允许换行时，富裕空间也会分为每行独自的富裕空间【可以用align-content解决】
02，align-items， align-content都是管理侧轴的富裕空间，但是前者注重单行单列，后者注重多行多列，如在一起，则看是单还是多
容器宽度不足处理机制
选择内部子元素等比缩小【若默认不换行的情况下flex-wrap】
项目
order：自定义项目排列顺序
align-self：管理单个项目的侧轴富裕空间
flex-groud：拉伸因子【默认值为0】
flex-shrink：收缩因子
flex-basis：基准值【默认值为项目width】
flex:x;：语法糖【flex-groud:x，flex-shrink:1，flex-basis:0】
注意点
01，align-self侧轴富裕空间管理在多行情况下没有align-content优先级高
02，在设计等分布局时，当没有使用语法糖flex，一定要把flex-basis基准值手动设为0
03，flex-groud计算公式
可用空间 = （容器大小 - 所有相邻项目flex-basis总和）
可扩展空间 = （可用空间 / 所有相邻项目flex-groud总和）
没项伸缩大小 = （flex-basis基准值 + 可扩展空间 * flex-groud值）
04，flex-shrink计算公式
计算收缩因子与基准值相乘总和
var a = 每一项flex-shrinkflex-basis之和
计算收缩因数
收缩因数 = 项目（flex-shrinkflex-basis） / 第一步计算总和
var b = （flex-shrink*flex-basis）/ a
移除空间计算
移除空间 = 项目收缩因数 * 负溢出空间
var c = b * 溢出空间
flex布局demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex之骰子布局以及等分布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 80%;
height: 90%;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#wrap > div {
width: 200px;
height: 200px;
display: flex;
padding: 5px;
border: 2px solid pink;
}
#wrap > div > div {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: pink;
}
#wrap > div:nth-child(1) {
justify-content: center;
align-items: center;
}
#wrap > div:nth-child(1) > div {}
#wrap > div:nth-child(2) {
justify-content: space-between;
align-items: flex-start;
}
#wrap > div:nth-child(2) > div:nth-child(2) {
align-self: flex-end;
}
#wrap > div:nth-child(3) {
justify-content: space-between;
align-items: flex-start;
}
#wrap > div:nth-child(3) > div:nth-child(2) {
align-self: center;
}
#wrap > div:nth-child(3) > div:nth-child(3) {
align-self: flex-end;
}
#wrap > div:nth-child(4) {
justify-content: space-between;
flex-wrap: wrap;
}
#wrap > div:nth-child(4) > div:nth-child(1) {
margin: 0 20px;
}
#wrap > div:nth-child(4) > div:nth-child(2) {
margin: 0 20px;
}
#wrap > div:nth-child(4) > div:nth-child(3) {
margin: 0 20px;
align-self: flex-end;
}
#wrap > div:nth-child(4) > div:nth-child(4) {
margin: 0 20px;
align-self: flex-end;
}
#wrap > div:nth-child(5) {
justify-content: space-between;
flex-wrap: wrap;
}
#wrap > div:nth-child(5) > div:nth-child(1) {
margin: 0 5px;
}
#wrap > div:nth-child(5) > div:nth-child(2) {
margin: 0 5px;
transform: translate(0, 50%);
/* 因为第一行的富裕空间底线正好在容器的中线上,所以要平移 */
align-self: flex-end;
}
#wrap > div:nth-child(5) > div:nth-child(3) {
margin: 0 5px;
}
#wrap > div:nth-child(5) > div:nth-child(4) {
margin: 0 5px;
align-self: flex-end;
}
#wrap > div:nth-child(5) > div:nth-child(5) {
margin: 0 5px;
align-self: flex-end;
}
#wrap > div:nth-child(6) {
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
}
#wrap > div:nth-child(6) > div {
margin: 0 10px;
}
#wrap > div:nth-child(7) {
width: 500px;
height: 300px;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
}
#wrap > div:nth-child(7) > div {
width: 400px;
height: 100px;
display: flex;
padding: 5px;
border: 2px solid pink;
border-radius: 0;
background-color: transparent;
}
#wrap > div:nth-child(7) > div > div {
flex: 100;
border-radius: 10px;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
/* flex语法糖相当于
基准值置零
flex-basis: 0;
flex-shrink: 1;
flex-grow: 1; */
}
</style>
</head>
<body>
<div id="wrap">
<div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div>
<div style="background-color: #0000FF;">111</div>
<div style="background-color: #00FF7F;">222</div>
<div style="background-color: deeppink;">333</div>
</div>
<div>
<div style="background-color: #0000FF;">111</div>
<div style="background-color: #00FF7F;">222</div>
<div style="background-color: deeppink;">333</div>
</div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
