一,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>