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在布局中的應用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！