Flexbox是一個強大且靈活的佈局，本文主要介紹了CSS Flexbox的具體用法詳解的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
一、Flexbox簡介
Flexbox佈局（Flexible Box)模組旨在提供一個更有效的方式製定、調整和分佈一個容器裡的項目佈局，即使他們的大小是未知或是動態的。簡單的理解，就是可以自動調整，計算元素在容器空間中的大小，並進行有效合理的佈局。
Flexbox佈局中有兩個重要的概念：Flex容器和Flex專案。
Flex容器包含多個Flex項目，透過對Flex容器和Flex項目的特定屬性進行設置，可以達到各種靈活的佈局樣式。
Flexbox使用
Flexbox的使用非常簡單，只需要對Flex容器設定display:flex或display:inline-flex，就可以具體操作使用Flexbox佈局了。
下面以具體範例示範：
html程式碼
<p class="container">
<p class="wrap">
<p></p>
<p></p>
<p></p>
</p>
</p>css程式碼
.container {
width: 70%;
height: 500px;
margin:20px auto;
border: 1px solid black;
}
.container .wrap {
display: flex;
border: 3px solid #a448cf;
margin:20px;
width:80%;
height:80%
}
.container .wrap p {
width:150px;
height:150px;
background-color: #c75a5a;
margin:10px;
}
二、Flex容器
#首先介紹下Flex容器的特定屬性以及具體的使用方式。
| 屬性 | 值 | 意義 |
|---|---|---|
| flex- direction | row || column || row-reverse || column-reverse | 控制Flex專案沿著主軸（Main Axis）的排列方向 |
| #flex-wrap | wrap || nowrap || wrap-reverse | #控制Flex專案是否換行顯示 |
| #row wrap|| row nowrap || column wrap || column nowrap 等 | flex-direction和flex-wrap兩個屬性的組合速記屬性 | |
| flex-start || flex-end || center || space-between || space-around | 控制Flex專案在Main-Axis上的對齊方式 | |
| flex-start || flex-end || center || stretch || baseline | 控制Flex專案在 Cross-Axis 對齊方式 | |
| flex-start || flex-end || center || stretch | 用於多行的Flex容器，控制Flex專案在 Cross-Axis 對齊方式 |
| 屬性 | 值 | 意義 |
|---|---|---|
| order | 數值 | 依據 order 值重新排序。從底到高。 |
| flex-grow | 0 || positive number | 控制Flex專案在容器有多餘的空間如何放大 |
| flex-shrink | 0 || positive number | 控制Flex專案在容器沒有額外空間又如何縮小 |
| flex- basis | auto || % || em || rem || px | #指定Flex專案的初始大小 |
| auto || flex-start || flex-end || center || baseline || stretch | 控制單一Flex專案在 Cross-Axis 對齊方式 |
以上是實例詳解CSS Flexbox的具體用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
# 
