下面小编就为大家带来一篇CSS弹性盒模型flex在布局中的应用详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前面的话
前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用
元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
JavaScript Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <div class="parent" style="background-color: lightgrey; height: 100px; width: 200px;">
- <div class="in" style="background-color: lightblue;">DEMOdiv>
- div>
【2】在伸缩项目上使用margin:auto
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <div class="parent" style="background-color: lightgrey;height: 100px;width: 200px;">
- <div class="in" style="background-color: lightblue;">DEMOdiv>
- div>
两端对齐
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <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>
底端对齐
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <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>
输入框按钮
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <div class="inputBox">
- <input class="inputBox-ipt">
- <button class="inputBox-btn">按钮button>
- div>
等分布局
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <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>
多列自适应布局
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <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>
悬挂布局
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <div class="box">
- <div class="left">左侧悬挂div>
- <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容div>
- div>
全屏布局
CSS Code复制内容到剪贴板
XML/HTML Code复制内容到剪贴板
- <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>
以上这篇CSS弹性盒模型flex在布局中的应用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持0133技术站。
原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/05/24/5460201.html
以上就是CSS弹性盒模型flex在布局中的应用详解的详细内容，更多请关注0133技术站其它相关文章！
