彈性布局
彈性布局相關屬性
flex-direction相關屬性
flex-wrap相關屬性
justify-content相關屬性
align-items相關屬性
align-content相關屬性
樣例Demo
彈性布局相關屬性
| 屬性 | 說明 |
|---|---|
| display | 值為flex時， 創建彈性布局容器 |
| flex-direction | 伸縮流方向 |
| flex-wrap | 伸縮流換行 |
| flex-flow | 伸縮流(包括方向與換行)，綜合了flex direction和flex-wrap屬性 |
| justify-content | 主軸對齊 |
| align-items | 側軸對齊 |
| align-content | 堆疊伸縮行，只有在flex-wrap:wrap和wrap-reverse 設定下且伸縮專案存在多行時才生效 |
| flex | 用于設定或檢索彈性模型物件的子元素如何分配空間，是flex-grow、flex-shrink和flex-basis屬性的簡寫屬性，即伸縮性，默認值是0 1. auto |
| order | 設定或檢索彈性模型物件的子元素出現的順序，默認值是0 |
| flex-grow | 一個數字，規定專案將相對于其他靈活的專案進行擴展的量，即擴展比率 |
| flex-shrink | 一個數字， 規定專案將相對于 其他靈活的專案進行收縮的量，即收縮比率， |
| flex-basis | 專案的長度，合法值“auto”"inherit"或一個后跟“%”‘ px”“ em"或任何其他長度單位的數字，即伸碩訓準值 |
flex-direction相關屬性
| 屬性 | 說明 |
|---|---|
| row | 主軸為水平方向，排列順序與頁面的檔案順序相同 |
| row-reverse | 主軸為水平方向，排列順序與頁面的檔案順序相反 |
| column | 主軸為垂直方向，排列順序為從上到下 |
| column-reverse | 主軸為垂直方向，排列順序為從下到上 |
flex-wrap相關屬性
| 屬性 | 說明 |
|---|---|
| nowrap (默認值) | 值為flex時， 創建彈性布局容器 |
| wrap | 伸縮流方向 |
| wrap-reverse | 伸縮流換行 |
| column-reverse | 伸縮流(包括方向與換行)，綜合了flex direction和flex-wrap屬性 |
justify-content相關屬性
| 屬性 | 說明 |
|---|---|
| flex-start | 默認值，專案位于容器的開頭 |
| flex- end | 專案位于容器的結尾 |
| center | 專案位于容器的中心 |
| space-between | 專案位于各行之間留有空白的容器內 |
| space-around | 專案位于各行之前、之間、之后都留有空白的容器內 |
align-items相關屬性
| 屬性 | 說明 |
|---|---|
| stretch | 默認值，專案被拉伸以適應容器 |
| center | 專案位于容器的中心 |
| flex-start | 專案位于容器的開頭 |
| flex- end | 專案位于容器的結尾 |
| baseline | 專案位于容器的基線上 |
align-content相關屬性
| 屬性 | 說明 |
|---|---|
| stretch | 默認值，專案被拉伸以適應容器 |
| center | 專案位于容器的中心 |
| flex-start | 專案位于容器的開頭 |
| flex-end | 專案位于容器的結尾 |
| space-between | 專案位于各行之間留有空白的容器內space-around |
樣例Demo
效果圖：
HTML5 實作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>彈性布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 50px;
height: 50px;
border: 1px solid blueviolet;
text-align: center;
line-height: 50px;
}
.flex-item1{
background: red;
order: 3;/*設定伸縮向的排序*/
}
.flex-item2{
background: green;
order: 1;/*設定伸縮向的排序*/
}
.flex-item3{
background: blue;
order: 2;/*設定伸縮向的排序*/
}
.flex-container1{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*主軸對齊*/
justify-content: flex-start;
}
.flex-container2{
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*主軸對齊*/
justify-content: flex-end;
}
.flex-container3{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-container4{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
.flex-center1{
/*伸縮向分配空間格式：flex：flex-grow;flex-fhrink;flex-grow*/
/*表示除了占據原先的寬度外，還要分配剩余寬度（包括擴展或收縮）*/
flex: 1 1 auto;
}
.flex-center2{
/*表示分配所有寬度（包括擴展或收縮）*/
flex-basis: 0%;
flex-shrink: 1;
flex-grow: 1;
}
</style>
</head>
<body>
<h3>水平排列</h3>
<h5>flex:1 1 auto</h5>
<div class="flex-container1">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box flex-center1">auto</div>
</div>
<h5>flex-basis: 0%;flex-shrink: 1;flex-grow: 1;</h5>
<div class="flex-container1">
<div class="flex-item1 box flex-center2">1</div>
<div class="flex-item2 box flex-center2">1</div>
<div class="flex-item3 box flex-center2">auto</div>
</div>
<h5>justify-content: flex-start;</h5>
<div class="flex-container1">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h5>justify-content: flex-end;</h5>
<div class="flex-container2">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h5>justify-content: space-around;;</h5>
<div class="flex-container3">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box">auto</div>
</div>
<h3>垂直排列</h3>
<div class="flex-container4">
<div class="flex-item1 box">1</div>
<div class="flex-item2 box">1</div>
<div class="flex-item3 box flex-center1">auto</div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249082.html
標籤：其他
上一篇：JavaScript詞法作用域