【传送门：阮一峰 - Flex 布局教程：语法篇】
相关文章：
-
1.【flex-grow】属性演示
-
2.【flex-shrink】属性演示
-
3.【flex-basis】属性演示
-
4.【flex】属性演示
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, p, a, input, form, textarea {
padding: 0;
margin: 0;
font-family: 'Microsoft YaHei';
}
hr {
margin: 20px 0;
border: 1px dashed #aaa;
}
.bg {
position: absolute;
min-width: 100%;
min-height: 100%;
background-color: rgb(50, 50, 50);
}
.center {
width: 80%;
margin: 20px auto;
}
.flex-container {
display: -webkit-flex;
display: flex;
}
.describe {
padding: 15px;
color: white;
background-color: chocolate;
border-radius: 10px;
border: 5px solid white;
-webkit-animation: BoxShadow 10s linear 0s infinite;
animation: BoxShadow 10s linear 0s infinite;
}
.describe dd {
padding-left: 26px;
margin-bottom: 10px;
line-height: 1.4;
}
.describe dd:last-child {
margin-bottom: 0;
}
.title {
margin: 15px 0;
font: 10em/1 fantasy;
letter-spacing: 20px;
text-align: center;
color: white;
-webkit-animation: TxtShadow 10s linear 0s infinite;
animation: TxtShadow 10s linear 0s infinite;
}
.main-content>h3 {
padding: 10px;
margin-top: 0;
text-align: center;
line-height: 1;
color: white;
background-color: mediumorchid;
border: 5px solid white;
border-radius: 25px;
}
.main-content .column {
flex: 0 1 33.33%;
}
.main-content .line {
margin: 0 20px;
border: 1px dashed #aaa;
}
.main-content .column>h4 {
text-align: center;
line-height: 1;
color: white;
}
.column .demo {
margin: 10px 0;
background-color: white;
border: 4px solid black;
box-shadow: 0px 0px 0px 1px white;
box-sizing: border-box;
}
.column .demo .demo-item {
width: 100px;
height: 100px;
}
.column:first-child .demo .demo-item {
background-color: coral !important;
-webkit-flex: initial !important;
flex: initial !important;
}
.column:not(.line) .demo .demo-item {
background-color: lightblue;
-webkit-flex: none;
flex: none;
}
.column:last-child .demo .demo-item {
background-color: khaki;
-webkit-flex: auto;
flex: auto;
}
.column .content {
padding-left: 26px;
margin-top: 10px;
line-height: 1.2;
color: white;
background-color: #5260c0;
border-radius: 10px;
border: 2px solid white;
}
.column .content>li {
margin: 5px 0;
}
.control {
padding: 15px 60px;
margin: 30px 0;
font-weight: bold;
color: white;
border-radius: 50%;
box-shadow: 0px -4px 0px 3px #ff4848;
}
.control .cur-width {
font-size: 1.2em;
text-align: center;
}
.control .range div {
-webkit-flex: 0 1 100%;
flex: 0 1 100%;
}
.control .range div:first-of-type,
.control .range div:last-of-type {
-webkit-flex: none;
flex: none;
}
.control .range div:nth-child(2) {
margin: 0 5px;
}
.control .range div input[type="range"] {
width: 100%;
cursor: pointer;
}
@keyframes BoxShadow {
0% {
box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
16.7% {
box-shadow: 0 0 20px 4px rgb(255, 0, 255);}
33.4% {
box-shadow: 0 0 20px 4px rgb(0, 0, 255);}
50.1% {
box-shadow: 0 0 20px 4px rgb(0, 255, 255);}
66.8% {
box-shadow: 0 0 20px 4px rgb(0, 255, 0);}
83.5% {
box-shadow: 0 0 20px 4px rgb(255, 255, 0);}
100% {
box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
}
@-webkit-keyframes BoxShadow {
0% {
box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
16.7% {
box-shadow: 0 0 20px 4px rgb(255, 0, 255);}
33.4% {
box-shadow: 0 0 20px 4px rgb(0, 0, 255);}
50.1% {
box-shadow: 0 0 20px 4px rgb(0, 255, 255);}
66.8% {
box-shadow: 0 0 20px 4px rgb(0, 255, 0);}
83.5% {
box-shadow: 0 0 20px 4px rgb(255, 255, 0);}
100% {
box-shadow: 0 0 20px 4px rgb(255, 0, 0);}
}
@keyframes TxtShadow {
0% {
text-shadow: -4px -2px 4px rgb(255, 0, 0);}
16.7% {
text-shadow: -4px -2px 4px rgb(255, 0, 255);}
33.4% {
text-shadow: -4px -2px 4px rgb(0, 0, 255);}
50.1% {
text-shadow: -4px -2px 4px rgb(0, 255, 255);}
66.8% {
text-shadow: -4px -2px 4px rgb(0, 255, 0);}
83.5% {
text-shadow: -4px -2px 4px rgb(255, 255, 0);}
100% {
text-shadow: -4px -2px 4px rgb(255, 0, 0);}
}
@-webkit-keyframes TxtShadow {
0% {
text-shadow: -4px -2px 4px rgb(255, 0, 0);}
16.7% {
text-shadow: -4px -2px 4px rgb(255, 0, 255);}
33.4% {
text-shadow: -4px -2px 4px rgb(0, 0, 255);}
50.1% {
text-shadow: -4px -2px 4px rgb(0, 255, 255);}
66.8% {
text-shadow: -4px -2px 4px rgb(0, 255, 0);}
83.5% {
text-shadow: -4px -2px 4px rgb(255, 255, 0);}
100% {
text-shadow: -4px -2px 4px rgb(255, 0, 0);}
}
style>
head>
<body>
<div class="bg">
<div class="center">
<dl class="describe">
<dt>回顾：dt>
<dd>1. flex-grow：当且仅当弹性容器空间剩余时，项目的扩展行为;dd>
<dd>2. flex-shrink：当且仅当弹性容器空间溢出时，项目的收缩行为;dd>
<dd>3. flex-basis：规定初始宽度，可覆盖、代替 "width"，优先级：flex-basis > width;dd>
dl>
<div class="title">flexdiv>
<div class="main-content">
<h3>弄清楚 flex-grow、flex-shrink、flex-basis 各自的 "任务" 后，就不难理解 flex 的各项值了h3>
<div class="control">
<div class="cur-width">滑动修改容器宽度：<output>100%output>div>
<div class="range flex-container">
<div>width: 0%div>
<div><input type="range" min="0" max="100" value="100" />div>
<div>100%;div>
div>
div>
<div class="flex-container">
<div class="column">
<h4>【默认值】flex: initial;h4>
<div class="demo flex-container">
<div class="demo-item">内容div>
div>
<ol class="content">
<li>等同于 "0 1 auto";li>
<li>"0" 代表 "flex-grow: 0;"li>
<li>"1" 代表 "flex-shrink: 1;"li>
<li>"auto" 代表 "flex-basis: auto;"li>
<li>即：初始宽度跟随 width，当容器空间剩余时不扩展，但溢出时收缩。li>
ol>
div>
<div class="line">div>
<div class="column">
<h4>flex: none;h4>
<div class="demo flex-container">
<div class="demo-item">内容div>
div>
<ol class="content">
<li>等同于 "0 0 auto";li>
<li>"0" 代表 "flex-grow: 0;"li>
<li>"0" 代表 "flex-shrink: 0;"li>
<li>"auto" 代表 "flex-basis: auto;"li>
<li>即：初始宽度跟随 width，容器空间剩余或溢出，均不会改变项目尺寸。li>
ol>
div>
<div class="line">div>
<div class="column">
<h4>flex: auto;h4>
<div class="demo flex-container">
<div class="demo-item">内容div>
div>
<ol class="content">
<li>等同于 "1 1 auto";li>
<li>"1" 代表 "flex-grow: 1;"li>
<li>"1" 代表 "flex-shrink: 1;"li>
<li>"auto" 代表 "flex-basis: auto;"li>
<li>即：初始宽度跟随 width，当容器空间剩余时扩展，溢出时收缩。li>
ol>
div>
div>
<hr />
<dl class="describe">
<dt>其他值：dt>
<dd>1. "flex: 0;" === "flex: 0 1 0%"，宽度由内容撑开，无内容则为 0;dd>
<dd>2. "flex: 1;" === "flex: 1 1 0%"，当容器空间剩余时扩展，溢出时收缩，并且各项宽度相等;
<br /> 【区分】"flex: auto;" 压缩后，宽度由各项内容撑开，各项宽度不相等;dd>
<dd>3. "flex: 0%" === "flex: 1;" === "flex: 1 1 0%;"dd>
<dd>4. "flex: 100%" === "flex: 1 1 100%;"dd>
<dd>5. "flex: 1 2;" === "flex: 1 2 0%;"dd>
dl>
div>
div>
div>
<script type="text/javascript">
;(function(doc) {
var flexBox = doc.querySelectorAll('.column .demo');
var range = doc.querySelector('.control .range input[type="range"]');
var output = doc.querySelector('.control .cur-width output');
var IEVersion = (function() {
var userAgent = navigator.userAgent;
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
var isEdge = userAgent.indexOf("Edge") > -1 && !isIE;
var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if(fIEVersion == 7) {
return 7;
} else if (fIEVersion == 8) {
return 8;
} else if (fIEVersion == 9) {
return 9;
} else if (fIEVersion == 10) {
return 10;
} else {
return 6;
}
} else if (isEdge) {
return 'edge';
} else if (isIE11) {
return 11;
} else {
return -1;
}
})();
function addHandler(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, false);
}else if(element.attachEvent){
element.attachEvent('on' + type, handler);
}else{
element['on' + type] = handler;
}
}
function chgBox(ele, type) {
if (IEVersion !== -1 && type === 'input') {
type = 'change';
}
addHandler(ele, type, function() {
for (var i = 0; i < flexBox.length; i++) {
flexBox[i].style.width = ele.value + '%';
output.value = ele.value + '%';
}
});
}
function bindEvent() {
chgBox(range, 'input');
}
function init() {
bindEvent();
}
init();
})(document);
script>
body>
html>
