搜索
热搜： Python 编程 PHP Microsoft 编程语言
首页> 前端开发 > Css3 > 正文

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

发布时间：2023-01-04 16:33:33 来源：互联网
.
工作是一种乐趣时，生活是一种享受！工作是一种义务时，生活则是一种苦役。对待平凡的工作要用不平凡的态度去面对。

前面的话

前面已经详细介绍过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
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图