- 彈性盒布局詳解
彈性盒布局詳解
彈性盒介紹
彈性盒是一種新的布局手段,用於代替浮動來布局頁面
彈性盒分為: 彈性容器和彈性元素
display: flex /* 設置為彈性容器 */
彈性容器內的直接子元素才是彈性元素
彈性盒的CSS屬性
開啟彈性盒
ul{
display: flex; /* 設置元素為彈性容器,其中的元素是彈性元素 */
}
彈性容器的CSS屬性
flex-direction設置彈性元素在彈性容器中的排列方向
/* 設置彈性元素在彈性容器中的排序列方向 */
display: flex;
flex-direction: row; /* 默認值： 從左向右排序 */
flex-direction: row-reverse; /* 從右往左排序, 位置上類似於float: right */
flex-direction: column; /* 從上往下排序 */
flex-direction: column-reverse; /* 從下往上排序 */
主軸與側軸(副軸)
主軸: 指的是彈性元素的排列方向
副軸: 與彈性元素排列方向垂直的方向
flex-direction: column-reverse; /* 此時主軸方向是自下向上類似 */
flex-wrap設置彈性容器空間不足時是否自動換行
注意: 優先級比flex-shrink高
/* 指定彈性容器空間不足時是否換行 優先級比flex-shrink高 */
flex-wrap: wrap;
flex-flow是wrap與direction結合的屬性
ul{
flex-flow: row wrap;
/* 以上等價於下面兩條語句 */
flex-direction: row;
flex-wrap: wrap;
}
justify-content指定彈性元素在彈性容器主軸的布局
flex-start元素沿着主軸起邊排列
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: flex-start;
}
flex-end元素沿着主軸終邊排列
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: flex-end;
}
center元素居中排列
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: center;
}
space-around空白平均分布到元素周圍
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: space-around;
}
看起來中間縫隙比較大是因為兩個元素的空白相加了
space-evenly元素周圍的空白看起來一致
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: space-evenly;
}
space-between元素緊貼兩側
ul{
/* justify-content指定彈性元素在彈性容器的的布局 */
justify-content: space-between;
}
align-content指定彈性元素在彈性容器側軸的布局
center側軸上元素處於居中(上下空白相等)
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: center;
flex-start側軸上元素靠上排列(且是上下連續緊貼)
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: flex-start;
flex-end側軸上元素靠下排列(且是上下連續緊貼)
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: flex-end;
flex-around側軸上元素靠下排列(且是上下連續緊貼)
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: flex-around;
flex-between側軸上元素緊貼兩側
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: flex-between;
stretch元素沿側軸排列與align-items: flex-start相似
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: stretch;
flex-end側軸上元素靠下排列(且是上下連續緊貼)
/* align-content指定彈性元素在彈性容器側軸的布局 */
align-content: flex-end;
align-items指定彈性元素在彈性容器中的對齊方式
stretch將元素每一行設置為長度一致
/* align-items指定彈性元素在彈性容器側軸的布局 */
align-items: stretch; /* 默認值 */
flex-start元素不拉伸的情況下貼緊側軸起邊
/* align-items指定彈性元素在彈性容器側軸的布局 */
align-items: flex-start; /* 默認值 */
flex-end元素不拉伸的情況下貼緊側軸終邊
/* align-items指定彈性元素在彈性容器側軸的布局 */
align-items: flex-end; /* 默認值 */
center元素在側軸居中對齊
/* align-items指定彈性元素在彈性容器側軸的布局 */
align-items: center; /* 默認值 */
baseline元素沿基線對齊
/* align-items指定彈性元素在彈性容器側軸的布局 */
align-items: baseline; /* 默認值 */
align-self用於自定義單個彈性元素的align-items樣式
ul{
/* 彈性容器規定其中每個彈性元素的樣式 */
align-items: flex-start;
}
li:first-of-type{
/* 為單個彈性元素設置樣式 */
align-self: flex-end;
}
彈性元素的CSS屬性
flex-grow與flex-shrink伸縮屬性
ul{
display: flex; /* 設置元素為彈性容器,其中的元素是彈性元素 */
}
li{
/* 伸展系數 */
flex-grow: 0; /* 默認值 */
flex-grow: 1; /* 默認值: 等比例伸展 */
/* 收縮系數: 指定當彈性容器容納不下所有子元素時,如何對子元素進行收縮 */
flex-shrink: 1; /* 默認值: 等比例收縮 */
flex-shrink: 0; /* 不收縮 */
}
flex-basis規定了彈性元素的基礎長度(會覆蓋原width或height,取決於主軸方向)
ul{
width: 800px;
border: 10px red solid;
/* 設置成彈性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 彈性元素的CSS屬性 */
flex-basis: 100px; /* 覆蓋width */
}
order指定多個彈性元素的順序
ul{
width: 800px;
border: 10px red solid;
/* 設置成彈性元素 */
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #bfa;
font-size: 50px;
text-align: center;
line-height: 100px;
/* 彈性元素的CSS屬性 */
flex-basis: 100px; /* 覆蓋width */
}
li:nth-child(1){
order: 2;
}
li:nth-child(2){
background-color: tomato;
order: 3;
}
li:nth-child(3){
background-color: orange;
order: 1;
}
align-items與justify-content讓元素在父元素中垂直水平居中
<style>
.father{
width: 400px;
height: 400px;
background-color: #bfa;
}
.son{
width: 100px;
height: 100px;
background-color: tomato;
}
/* 使用彈性盒讓子元素在父元素中垂直水平居中 */
/* 父元素成為彈性容器 */
.father{
display: flex;
justify-content: center;
align-items: center;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
