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