温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2021-09-14 14:37:17 来源:亿速云 阅读:175 作者:chen 栏目:web开发

本篇内容主要讲解“CSS弹性盒模型flex在布局中的应用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS弹性盒模型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. <div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">  

  2.     <div class="in" style="background-color: lightblue;">DEMO</div>         

  3. </div>  

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

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

CSS Code复制内容到剪贴板

  1. <style>   

  2. .parent{   

  3.     display: flex;   

  4. }   

  5. .in{   

  6.     marginauto;   

  7. }   

  8. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  

  2.     <div class="in" style="background-color: lightblue;">DEMO</div>         

  3. </div>  

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

两端对齐

CSS Code复制内容到剪贴板

  1. <style>   

  2. .parent{   

  3.     display: flex;   

  4.     justify-content:space-between   

  5. }   

  6. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  

  2.     <div class="in" style="background-color: lightblue;">DEMO</div>  

  3.     <div class="in" style="background-color: lightgreen;">DEMO</div>  

  4.     <div class="in" style="background-color: lightcyan;">DEMO</div>  

  5.     <div class="in" style="background-color: lightseagreen;">DEMO</div>         

  6. </div>  

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

底端对齐

CSS Code复制内容到剪贴板

  1. <style>   

  2. .parent{   

  3.     display: flex;   

  4.     align-items: flex-end;   

  5. }   

  6. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  

  2.     <div class="in" style="background-color: lightblue; height:20px;">DEMO</div>  

  3.     <div class="in" style="background-color: lightgreen; height:30px;">DEMO</div>  

  4.     <div class="in" style="background-color: lightcyan; height:40px;">DEMO</div>  

  5.     <div class="in" style="background-color: lightseagreen; height:50px;">DEMO</div>         

  6. </div>  

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

输入框按钮

CSS Code复制内容到剪贴板

  1. <style>   

  2. .inputBox{   

  3.     display: flex;   

  4.     width250px;   

  5. }   

  6. .inputBox-ipt{   

  7.     flex: 1;   

  8. }   

  9. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="inputBox">  

  2.   <input class="inputBox-ipt">  

  3.   <button class="inputBox-btn">按钮</button>  

  4. </div>  

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

等分布局

CSS Code复制内容到剪贴板

  1. <style>   

  2. body,p{margin: 0;}   

  3. .parent{   

  4.     display: flex;   

  5. }   

  6. .child{   

  7.     flex:1;   

  8.     height100px;   

  9. }   

  10. .child + .child{   

  11.     margin-left20px;   

  12. }   

  13. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  

  2.     <div class="child" style="background-color: lightblue;">1</div>  

  3.     <div class="child" style="background-color: lightgreen;">2</div>  

  4.     <div class="child" style="background-color: lightsalmon;">3</div>  

  5.     <div class="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-right20px;}   

  5. .rightright{flex: 1;}   

  6. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" style="background-color: lightgrey;">  

  2.     <div class="left" style="background-color: lightblue;">  

  3.         <p>left</p>  

  4.         <p>left</p>  

  5.     </div>               

  6.     <div class="center" style="background-color: pink;">  

  7.         <p>center</p>  

  8.         <p>center</p>  

  9.     </div>               

  10.     <div class="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.     width300px;   

  6. }   

  7. .left{   

  8.     margin-right20px;   

  9.     background-color: lightblue;   

  10.     height30px;   

  11. }   

  12. .main{   

  13.     flex:1;   

  14. }   

  15. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="box">  

  2.     <div class="left">左侧悬挂</div>  

  3.     <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>       

  4. </div>  

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

全屏布局

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.     height50px;   

  10. }   

  11. .middle{   

  12.     display: flex;   

  13.     flex: 1;   

  14. }   

  15. .left{   

  16.     width100px;   

  17.     margin-right20px;   

  18. }   

  19. .rightright{   

  20.     flex: 1;   

  21.     overflowauto;   

  22. }   

  23. .rightright-in{   

  24.     height1000px;   

  25. }   

  26. </style>  

XML/HTML Code复制内容到剪贴板

  1. <div class="parent" id="parent" style="background-color: lightgrey;">  

  2.     <div class="top" style="background-color: lightblue;">  

  3.         <p>top</p>  

  4.     </div>    

  5.     <div class="middle" style="background-color: pink;">  

  6.         <div class="left" style="background-color: orange;">  

  7.             <p>left</p>  

  8.         </div>        

  9.         <div class="right" style="background-color: lightsalmon;">  

  10.             <div class="right-in">  

  11.                 <p>right</p>  

  12.             </div>               

  13.         </div>                       

  14.     </div>                 

  15.     <div class="bottom" style="background-color: lightgreen;">  

  16.         <p>bottom</p>  

  17.     </div>           

  18. </div>  

到此,相信大家对“CSS弹性盒模型flex在布局中的应用”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI