CSS弹性盒模型flex在布局中的应用详解

互联网
工作是一种乐趣时，生活是一种享受！工作是一种义务时，生活则是一种苦役。对待平凡的工作要用不平凡的态度去面对。

前面的话

前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法，本文将介绍flex在布局中的应用

元素居中【1】伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items

JavaScript Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. display:flex;
  4. justify-content:center;
  5. align-items:center;
  6. }
  7. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;">
  2. <divclass="in"style="background-color:lightblue;">DEMO</div>
  3. </div>

【2】在伸缩项目上使用margin:auto

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. display:flex;
  4. }
  5. .in{
  6. margin:auto;
  7. }
  8. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;">
  2. <divclass="in"style="background-color:lightblue;">DEMO</div>
  3. </div>

两端对齐

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. display:flex;
  4. justify-content:space-between
  5. }
  6. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;">
  2. <divclass="in"style="background-color:lightblue;">DEMO</div>
  3. <divclass="in"style="background-color:lightgreen;">DEMO</div>
  4. <divclass="in"style="background-color:lightcyan;">DEMO</div>
  5. <divclass="in"style="background-color:lightseagreen;">DEMO</div>
  6. </div>

底端对齐

CSS Code复制内容到剪贴板
  1. <style>
  2. .parent{
  3. display:flex;
  4. align-items:flex-end;
  5. }
  6. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;height:100px;width:200px;">
  2. <divclass="in"style="background-color:lightblue;height:20px;">DEMO</div>
  3. <divclass="in"style="background-color:lightgreen;height:30px;">DEMO</div>
  4. <divclass="in"style="background-color:lightcyan;height:40px;">DEMO</div>
  5. <divclass="in"style="background-color:lightseagreen;height:50px;">DEMO</div>
  6. </div>

输入框按钮

CSS Code复制内容到剪贴板
  1. <style>
  2. .inputBox{
  3. display:flex;
  4. width:250px;
  5. }
  6. .inputBox-ipt{
  7. flex:1;
  8. }
  9. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="inputBox">
  2. <inputclass="inputBox-ipt">
  3. <buttonclass="inputBox-btn">按钮</button>
  4. </div>

等分布局

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. .parent{
  4. display:flex;
  5. }
  6. .child{
  7. flex:1;
  8. height:100px;
  9. }
  10. .child+.child{
  11. margin-left:20px;
  12. }
  13. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="child"style="background-color:lightblue;">1</div>
  3. <divclass="child"style="background-color:lightgreen;">2</div>
  4. <divclass="child"style="background-color:lightsalmon;">3</div>
  5. <divclass="child"style="background-color:pink;">4</div>
  6. </div>

多列自适应布局

CSS Code复制内容到剪贴板
  1. <style>
  2. p{margin:0;}
  3. .parent{display:flex;}
  4. .left,.center{margin-right:20px;}
  5. .rightright{flex:1;}
  6. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"style="background-color:lightgrey;">
  2. <divclass="left"style="background-color:lightblue;">
  3. <p>left</p>
  4. <p>left</p>
  5. </div>
  6. <divclass="center"style="background-color:pink;">
  7. <p>center</p>
  8. <p>center</p>
  9. </div>
  10. <divclass="right"style="background-color:lightgreen;">
  11. <p>right</p>
  12. <p>right</p>
  13. </div>
  14. </div>

悬挂布局

CSS Code复制内容到剪贴板
  1. <style>
  2. .box{
  3. display:flex;
  4. background-color:lightgrey;
  5. width:300px;
  6. }
  7. .left{
  8. margin-right:20px;
  9. background-color:lightblue;
  10. height:30px;
  11. }
  12. .main{
  13. flex:1;
  14. }
  15. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="box">
  2. <divclass="left">左侧悬挂</div>
  3. <divclass="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>
  4. </div>

全屏布局

CSS Code复制内容到剪贴板
  1. <style>
  2. body,p{margin:0;}
  3. body,html,.parent{height:100%;}
  4. .parent{
  5. display:flex;
  6. flex-direction:column;
  7. }
  8. .top,.bottombottom{
  9. height:50px;
  10. }
  11. .middle{
  12. display:flex;
  13. flex:1;
  14. }
  15. .left{
  16. width:100px;
  17. margin-right:20px;
  18. }
  19. .rightright{
  20. flex:1;
  21. overflow:auto;
  22. }
  23. .rightright-in{
  24. height:1000px;
  25. }
  26. </style>
XML/HTML Code复制内容到剪贴板
  1. <divclass="parent"id="parent"style="background-color:lightgrey;">
  2. <divclass="top"style="background-color:lightblue;">
  3. <p>top</p>
  4. </div>
  5. <divclass="middle"style="background-color:pink;">
  6. <divclass="left"style="background-color:orange;">
  7. <p>left</p>
  8. </div>
  9. <divclass="right"style="background-color:lightsalmon;">
  10. <divclass="right-in">
  11. <p>right</p>
  12. </div>
  13. </div>
  14. </div>
  15. <divclass="bottom"style="background-color:lightgreen;">
  16. <p>bottom</p>
  17. </div>
  18. </div>

以上这篇CSS弹性盒模型flex在布局中的应用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

原文地址：http://www.cnblogs.com/xiaohuochai/archive/2016/05/24/5460201.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题