CSS弹性盒模型flex在布局中的应用
元素居中
【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
.parent{ display: flex; justify-content: center; align-items: center;} DEMO
【2】在伸缩项目上使用margin:auto
.parent{ display: flex;}.in{ margin: auto;} DEMO
两端对齐
立即学习“前端免费学习笔记（深入）”；
.parent{ display: flex; justify-content:space-between } DEMO DEMO DEMO DEMO
底端对齐
.parent{ display: flex; align-items: flex-end; } DEMO DEMO DEMO DEMO
输入框按钮
.inputBox{ display: flex; width: 250px;}.inputBox-ipt{ flex: 1;}
等分布局
body,p{margin: 0;}.parent{ display: flex;}.child{ flex:1; height: 100px;}.child + .child{ margin-left: 20px;} 1 2 3 4
多列自适应布局
p{margin: 0;}.parent{display: flex;}.left,.center{margin-right: 20px;}.right{flex: 1;} left
left
center
nitc免费效益型企业网站PHP版3.2 本地体验包 NITC效益型企业网站系统(PHP)产品特色1、企业网站模块：1）网站设计精美：前台页面全部采用DIV+CSS，设计严谨，布局合理，页面精美大气。2）管理操作方便：后台管理界面友好，简单易用，区别于一般CMS系统的复杂与繁琐，功能强大，系统安全，性能稳定。用户使用全自动化控制，功能模块可扩展性强。2、搜索引擎优化： 经众多网络营销专家制定，系统自带搜索引擎基础优化功能，能在最短的时间内提升网站的曝
0 查看详情 
center
right
right
悬挂布局
.box{ display: flex; background-color: lightgrey; width: 300px;}.left{ margin-right: 20px; background-color: lightblue; height: 30px;}.main{ flex:1;} 左侧悬挂 主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容
全屏布局
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;} top
left
right
bottom
以上就是CSS弹性盒模型flex在布局中的应用的全部内容。
相关参考：创想鸟
以上就是CSS弹性盒模型flex在布局中的使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1615233.html
微信扫一扫 
支付宝扫一扫 
