× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐 [4]输入框按钮 [5]等分布局 [6]自适应布局 [7]悬挂布局 [8]全屏布局
前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法,本文将介绍flex在布局中的应用
元素居中
【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
1 | <style>.parent{ display: flex; justify-content: center; align-items: center;}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey; height: 100px; width: 200px;" > <div class = "in" style= "background-color: lightblue;" >DEMO</div> </div>
|
Copier après la connexion
【2】在伸缩项目上使用margin:auto
1 | <style>.parent{ display: flex;}.in{ margin: auto;}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey;height: 100px;width: 200px;" > <div class = "in" style= "background-color: lightblue;" >DEMO</div> </div>
|
Copier après la connexion
两端对齐
1 | <style>.parent{ display: flex; justify-content:space-between}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey;height: 100px;width: 200px;" > <div class = "in" style= "background-color: lightblue;" >DEMO</div> <div class = "in" style= "background-color: lightgreen;" >DEMO</div> <div class = "in" style= "background-color: lightcyan;" >DEMO</div> <div class = "in" style= "background-color: lightseagreen;" >DEMO</div> </div>
|
Copier après la connexion
底端对齐
1 | <style>.parent{ display: flex; align-items: flex- end ;}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey;height: 100px;width: 200px;" > <div class = "in" style= "background-color: lightblue; height:20px;" >DEMO</div> <div class = "in" style= "background-color: lightgreen; height:30px;" >DEMO</div> <div class = "in" style= "background-color: lightcyan; height:40px;" >DEMO</div> <div class = "in" style= "background-color: lightseagreen; height:50px;" >DEMO</div> </div>
|
Copier après la connexion
输入框按钮
1 | <style>.inputBox{ display: flex; width: 250px;}.inputBox-ipt{ flex: 1;}</style>
|
Copier après la connexion
1 | <div class = "inputBox" > <input class = "inputBox-ipt" > <button class = "inputBox-btn" >按钮</button></div>
|
Copier après la connexion
等分布局
1 | <style>body,p{margin: 0;}.parent{ display: flex;}.child{ flex:1; height: 100px;}.child + .child{ margin-left: 20px;}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey;" > <div class = "child" style= "background-color: lightblue;" >1</div> <div class = "child" style= "background-color: lightgreen;" >2</div> <div class = "child" style= "background-color: lightsalmon;" >3</div> <div class = "child" style= "background-color: pink;" >4</div> </div>
|
Copier après la connexion
多列自适应布局
1 | <style>p{margin: 0;}.parent{display: flex;}.left,.center{margin-right: 20px;}.right{flex: 1;}</style>
|
Copier après la connexion
1 | <div class = "parent" style= "background-color: lightgrey;" > <div class = "left" style= "background-color: lightblue;" > <p>left</p> <p>left</p> </div> <div class = "center" style= "background-color: pink;" > <p>center</p> <p>center</p> </div> <div class = "right" style= "background-color: lightgreen;" > <p>right</p> <p>right</p> </div> </div>
|
Copier après la connexion
悬挂布局
1 | <style> .box{ display: flex; background-color: lightgrey; width: 300px;}.left{ margin-right: 20px; background-color: lightblue; height: 30px;}.main{ flex:1;}</style>
|
Copier après la connexion
1 | <div class = "box" > <div class = "left" >左侧悬挂</div> <div class = "main" >主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div> </div>
|
Copier après la connexion
全屏布局
1 | <style>body,p{margin: 0;}body,html,.parent{height: 100%;}.parent{ display: flex; flex-direction: column;}.top,.bottom{ height: 50px;}.middle{ display: flex; flex: 1;}.left{ width: 100px; margin-right: 20px;}.right{ flex: 1; overflow: auto;}.right-in{ height: 1000px;}</style>
|
Copier après la connexion
1 | <div class = "parent" id= "parent" style= "background-color: lightgrey;" > <div class = "top" style= "background-color: lightblue;" > <p>top</p> </div> <div class = "middle" style= "background-color: pink;" > <div class = "left" style= "background-color: orange;" > <p>left</p> </div> <div class = "right" style= "background-color: lightsalmon;" > <div class = "right-in" > <p>right</p> </div> </div> </div> <div class = "bottom" style= "background-color: lightgreen;" > <p>bottom</p> </div> </div>
|
Copier après la connexion