前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用
YIXUNCMS中秋专版2.0.4
下载
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
元素居中
【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;">DEMOdiv> 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;">DEMOdiv> 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;">DEMOdiv> <div class="in" style="background-color: lightgreen;">DEMOdiv> <div class="in" style="background-color: lightcyan;">DEMOdiv> <div class="in" style="background-color: lightseagreen;">DEMOdiv> 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;">DEMOdiv> <div class="in" style="background-color: lightgreen; height:30px;">DEMOdiv> <div class="in" style="background-color: lightcyan; height:40px;">DEMOdiv> <div class="in" style="background-color: lightseagreen; height:50px;">DEMOdiv> 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;">1div> <div class="child" style="background-color: lightgreen;">2div> <div class="child" style="background-color: lightsalmon;">3div> <div class="child" style="background-color: pink;">4div> 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>leftp> <p>leftp> div> <div class="center" style="background-color: pink;"> <p>centerp> <p>centerp> div> <div class="right" style="background-color: lightgreen;"> <p>rightp> <p>rightp> 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>topp> div> <div class="middle" style="background-color: pink;"> <div class="left" style="background-color: orange;"> <p>leftp> div> <div class="right" style="background-color: lightsalmon;"> <div class="right-in"> <p>rightp> div> div> div> <div class="bottom" style="background-color: lightgreen;"> <p>bottomp> div> div>
