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

本篇内容主要讲解“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>  

【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. <div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">  

2.     <div class="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. <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 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 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. <div class="inputBox">  

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

3.   <button class="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. <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-right: 20px;}   

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.     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. <div class="box">  

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

3.     <div class="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. <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在布局中的应用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！