<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex {
display: flex;
width: 400px;
margin-bottom: 30px;
border: 2px dotted red;
}
.flex div {
border: 1px solid green;
}
.flex-initial {
flex: initial;
}
.flex-0 div {
flex: 0;
}
.flex-none div {
flex: none;
}
.flex-1 div {
flex: 1;
}
.flex-auto div {
flex: auto;
}
</style>
</head>
<body>
<p>flex: initial (flex: 0 1 auto)，初始值，常用。</p>
<div class="flex flex-initial">
<div>Javascript</div>
<div>Vue.js</div>
<div>CSS3</div>
<div>Element-ui</div>
<div>Adobe Photoshop CC 2020</div>
</div>
<p>flex: 0 (flex: 0 1 0%)，适用场景较少。适合设置在替换元素的父元素上；</p>
<div class="flex flex-0">
<div>Javascript</div>
<div>Vue.js</div>
<div>CSS3</div>
<div>Element-ui</div>
<div>Adobe Photoshop CC 2020</div>
</div>
<p>flex: none (flex: 0 0 auto)，推荐。适用于不换行的内容固定或者较少的小控件元素上，如按钮。</p>
<div class="flex flex-none">
<div>Javascript</div>
<div>Vue.js</div>
<div>CSS3</div>
<div>Element-ui</div>
<div>Adobe Photoshop CC 2020</div>
</div>
<p>flex: 1 (flex: 1 1 0%)，推荐。适合等分布局；</p>
<div class="flex flex-1">
<div>Javascript</div>
<div>Vue.js</div>
<div>CSS3</div>
<div>Element-ui</div>
<div>Adobe Photoshop CC 2020</div>
</div>
<p>flex: auto (flex: 1 1 auto)，使用场景少。适合基于内容动态适配的布局；</p>
<div class="flex flex-auto">
<div>Javascript</div>
<div>Vue.js</div>
<div>CSS3</div>
<div>Element-ui</div>
<div>Adobe Photoshop CC 2020</div>
</div>
</body>
</html>
网友评论