demo1:flex-grow
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
div{
border:1px dashed red;
width:550px;
display: flex;
background-color: lightgreen;
}
div > span{
padding: 10px;
background-color: pink;
border:1px solid black;
box-sizing: border-box;
}
div:nth-child(5) > span:nth-child(3){
flex-grow:1;
}
div:nth-child(7) > span:nth-child(1){
flex-grow: 1;
}
div:nth-child(7) > span:nth-child(2){
flex-grow: 1;
}
div:nth-child(7) > span:nth-child(3){
flex-grow: 1;
}
div:nth-child(9) > span:nth-child(1){
flex-grow: 0.5;
}
div:nth-child(9) > span:nth-child(2){
flex-grow: 0.3;
}
div:nth-child(9) > span:nth-child(3){
flex-grow: 0.3;
}
div:nth-child(11) > span:nth-child(1){
width: 100px;
flex-grow: 3;
}
div:nth-child(11) > span:nth-child(2){
width:80px;
flex-grow: 2;
}
div:nth-child(11) > span:nth-child(3){
width: 120px;
flex-grow: 1;
}
</style>
</head>
<body>
<h1>flex-grow:设置弹性元素增长因子</h1>
<h3>(1):所有弹性因子不增长，以原始宽度显示，增长因子为:0(默认)</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(2):将全部剩余空间分配给指定弹性元素，例如:第三个</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(3):全部剩余空间按增长因子在不同弹性元素之间分配</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(4):增长因子支持小数，因为是按比例分配的但是这里测试发现增长因子之和必须超过1 Google浏览器才支持</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(5):每个弹性因素宽度不同时，同样适用以上分配规律</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo2:flex-shrink
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo2</title>
<style>
div{
width: 300px;
background-color: lightgreen;
border:3px dashed red;
display: flex;
}
div:nth-child(3) > span{
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 0;
}
div:nth-child(5) > span{
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 1;
}
div:nth-child(7) > span:nth-child(1){
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 1;
}
div:nth-child(7) > span:nth-child(2){
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 2;
}
div:nth-child(7) > span:nth-child(3){
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 2;
}
div:nth-child(9) > span{
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 0.5;
}
div:nth-child(11) > span:nth-child(1){
width: 100px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 0.5;
}
div:nth-child(11) > span:nth-child(2){
width: 120px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 0.5;
}
div:nth-child(11) > span:nth-child(3){
width: 140px;
border:1px solid black;
padding: 10px;
background-color: pink;
flex-shrink: 0.5;
}
</style>
</head>
<body>
<h1>flex-shrink:设置弹性元素缩减因子</h1>
<h3>(1):所有弹性元素不缩减，以原始宽度显示，缩减因子为:0</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(2):所有弹性元素自适应容器宽度且不换行，缩减因子为:1(默认)</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(3):当三个弹性元素因子不相等时</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(4):缩减因子也可以是小数总和大于1即可</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(5):当每个弹性元素大小不一时缩减公式改变 变为 缩减像素大小=原大小*(缩减因子*调整因子) 调整因子=等缩空间/每个元素大小与缩减因子乘积之和</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo3:flex-basis
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo3</title>
<style>
div{
width: 400px;
border: 5px dashed red;
background-color: lightgreen;
display: flex;
box-sizing: border-box;
}
div:nth-child(3) > span{
padding: 10px;
border:1px solid black;
background-color: pink;
flex-shrink:0;
flex-basis:content;
}
div:nth-child(5) > span{
padding: 10px;
border:1px solid black;
background-color: pink;
flex-shrink:0;
flex-basis:150px;
}
div:nth-child(7) > span{
width:150px;
padding: 10px;
border:1px solid black;
background-color: pink;
flex-shrink:0;
flex-basis:auto;
box-sizing: border-box;
}
div:nth-child(9) > span{
width:150px;
padding: 10px;
border:1px solid black;
background-color: pink;
flex-shrink:0;
flex-basis:100px;
}
div:nth-child(11) > span{
padding: 10px;
box-sizing: border-box;
border:1px solid black;
background-color: pink;
flex-shrink:0;
box-sizing: border-box;
flex-basis:20%;
}
</style>
</head>
<body>
<h1>flex-basis:设置弹性元素的基准尺寸</h1>
<h3>(1):在位设置弹性元素宽度即flex-basis:content(默认)时,弹性元素宽度由内容宽度决定</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(2):存在自定义元素宽度时，则以该宽度显示</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(3):flex-basis:auto自动状态下有浏览器根据预设值自动判定 有用户定义 width:xxx 用用户定义没有的话根据元素内容</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(4):当元素既有自定义(width:xxx)宽度又有基准宽度时(flex-basis:xxx) 以基准宽度为准</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(5):元素基准宽度支持百分比</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo4:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo4</title>
<style>
div{
border:3px dashed red;
background-color: lightgreen;
display: flex;
}
div:nth-child(3) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 0 1 auto;
}
div:nth-child(5) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 1 1 auto;
}
div:nth-child(7) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 0 0 auto;
}
div:nth-child(9) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 1;
}
div:nth-child(11) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 1 1 100px;
}
div:nth-child(13) > span{
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
}
div:nth-child(13) > span:nth-child(1){
width:50px;
padding:20px;
border:1px solid black;
background-color: pink;
flex: 1 1 100px;
}
</style>
</head>
<body>
<h1>简化弹性元素的基本设置</h1>
<h3>(1):根据宽度计算，允许缩减适应容器</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(2):根据宽度计算，元素以完全弹性以适应容器</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(3):元素完全失去弹性，以原始大小呈现</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(4):flex只有一个值时表示增长因子 flex 默认值是 flex:0 1 auto;</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(5):第三个有具体数值时以它为基准值计算</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
<h3>(6):单独设置某一元素弹性大小</h3>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo5:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo5</title>
<style>
div{
border:1px dashed red;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: lightgreen;
/*align-items: center;*/
height: 500px;
}
span{
border:1px solid black;
background-color: pink;
padding: 20px;
background-color: white;
}
div >span:nth-child(1){
align-self: center;
background-color: pink;
}
div >span:nth-child(3){
align-self:flex-start;
background-color: pink;
}
</style>
</head>
<body>
<div>
<span>item1</span>
<span>item2</span>
<span>item3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
demo6:
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo6</title>
<style>
div{
display: flex;
/* background-color: lightgreen;*/
border:1px solid red;
flex-direction: column;
}
div > span:nth-child(1){
flex-basis: 10vh;
background-color: white;
}
div > span:nth-child(2){
flex-basis: 80vh;
background-color: green;
}
div > span:nth-child(3){
flex-basis: 10vh;
background-color: white;
}
</style>
</head>
<body>
<div>
<span>头部</span>
<span>主体</span>
<span>底部</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
