這篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於css伸縮盒佈局的相關問題，一個元素設定CSS 屬性display:flex 或者display:inline-flex ，該元素就變成伸縮容器，下面一起來看一下，希望對大家有幫助。
（學習影片分享：css影片教學、html影片教學）
伸縮盒子佈局
1 伸縮容器與伸縮項目
#伸展容器： 一個元素設定CSS 屬性display:flex 或display:inline-flex ，該元素就變成伸縮容器。
伸縮項目： 伸縮容器的子元素就是伸縮項目。
伸縮項目的特性：
- 伸縮項目會在伸縮容器預設中水平排列。
- 伸縮項目可以設定寬高、內外邊距且不存在外邊距塌陷， 不會脫離文件流，具有伸縮性。
- 一個元素可以同時是伸縮項目和伸縮容器。
2 設定主軸方向與換行方式
#主軸： 伸縮項目沿著主軸排列， 預設的主軸方向是從左到右。
側軸： 與主軸垂直的軸叫側軸，側軸方向隨主軸方向變化。
設定主軸方向
給伸縮容器給CSS 屬性flex-direction 可以設定主軸方向，值如下：
row 水平从左到右，默认值
row-reverse 水平从右到左
column 垂直从上到下
column-reverse 垂直从下到上
登入後複製
設定換行方式
給伸縮容器CSS 屬性flex-wrap 可以設定伸縮項目在主軸方向上的換行方式，屬性的值如下：
nowrap 默认值，不换行
wrap 自动换行
wrap-reverse 自动换行，行翻转
登入後複製
同時設定主軸方向和換行方式
flex-flow 是flex-directrion 和flex-wrap 的複合屬性，可以同時設定主軸方向和換行方式。
flex-flow 可以設定 1 個值也可以設定 2 個值（兩個值之間沒有順序要求）。
3 設定伸縮項目在主軸上的對齊方式
給伸縮容器設定justify-content 屬性，可以設定伸縮項目在主軸上的對齊方式，屬性的值如下：
flex-start 默认值，主轴起始对齐
flex-end 主轴结束对齐
center 居中
space-between 两端没有空隙，中间有空隙
space-around 两端空隙是中间空隙的一半
space-enenly 两端空隙与中间空隙相等
登入後複製
4 設定伸縮項目在側軸上的對齊方式
一條主軸線（伸縮項目在主軸上不換行）
給伸縮容器設定align-items 屬性進行設置，屬性值如下：
stretch 默认值，伸缩项目在侧轴方向的长度（高度）在侧轴方向拉伸（不设置在侧轴方向的长度，才会生效）
flex-start 侧轴起点对齐
flex-end 侧轴终点对齐
center 居中对齐
baseline 文本基线对齐
登入後複製
多條主軸線（伸縮項目在主軸上發生換行）
給予伸縮容易設定align-content 屬性進行設置，屬性值如下：
strecch 默认值
flex-start 侧轴起点对齐
flex-end 侧轴终点对齐
center 居中对齐
space-between 两端没有空隙，中间有空隙
space-around 两端空隙是中间空隙的一半
space-enenly 两端空隙与中间空隙相等
登入後複製
#總結：
- align-content 實際上設定的是多條主軸之間如何對齊。
- align-items 屬性不論一條主軸線或多條主軸線都會起作用；但是 align-content 只對多條主軸線情況下起作用。
5 伸縮項目的伸縮性
#伸展項目在主軸上的基準長度flex-basis
#flex-basis 指定長度可以設定該伸縮項目在主軸上的長度。
如果沒有設定 flex-basis，伸縮項目在主軸上的長度取決於所設定的 width 或 height。
擴展比率 flex-grow
指定數字表示擴展的比率，該屬性的預設值是 0。
伸縮項目發生擴展的前提： 伸縮容器在主軸方向向上有富餘的長度。
伸縮項目進行擴展的時候只考慮伸縮項目的擴展比率。
縮比 flex-shrink
指定數字表示縮小的比率，該屬性的預設值是 1。
伸縮項目發生收縮的前提： 伸縮容器在主軸方向上長度不足。
伸縮項目進行收縮既要考慮收縮比率，也要考慮收縮項目原來在主軸上的長度。
flex 複合屬性
同時設定擴展比率、收縮比率、主軸基準長度，設定規則如下：
flex: grow shrink basis;flex: 0 1 auto; /* 扩展比率是0，收缩比率是1，基准值是auto */
登入後複製
flex: 1; /* flex: 1 1 0; */flex: auto; /* flex: 1 1 auto; */flex: none; /* flex: 0 0 auto 不伸不缩*/flex: 0 auto; /* flex: 0 1 auto */
登入後複製
6 伸縮項目排序
使用order 屬性設定伸縮項目的排序，值是數字，數字越小排序越靠前，可以是負值。預設值是 0。
7 單獨設定伸縮項目在側軸上的對齊方式
給伸縮項目設定屬性align-self 可以單獨設定該伸縮項目在側軸上的對齊方式，屬性的值與align-items 一致。
8 伸縮盒相關CSS 屬性總結
設定給伸縮容器的屬性
| CSS屬性名稱 |
意義 |
值 |
| #display |
設定伸縮容器 |
flex：區塊級伸縮容器。
**inline-flex：**行內伸縮容器。 |
| flex-direction |
設定主軸方向 |
row： 預設值，水平從左到右。
row-reverse： 水平從右到左。
column： 垂直從上到下。
**column-reverse：**垂直從下往上 |
| flex-wrap |
設定換行方式 |
nowrap ： 預設值，不換行。
wrap： 自動換行。
wrap-reverse： 自動換行且行翻轉。 |
| flex-flow |
同時設定主軸方向和換行方式 |
flex-dierection 和flex-wrap 的值 |
| #justify-content |
設定伸縮項目在主軸上的對齊方式 |
flex-start： 主軸起點對齊。
flex-end： 主軸終點對齊。
center： 居中對齊。
space-between： 兩端無空隙，中間有空隙。
**space-around：**兩端空隙是中間空隙的一半。
**space-evenly：**兩端空隙與中間空隙一致。 |
| align-items |
設定伸縮項目在側軸上的對齊方式（適用於一條主軸線） |
stretch： 預設值，在側軸上拉伸。
flex-start： 側軸起點對齊。
flex-end： 側軸終點對齊。
center： 居中對齊。
baseline： 基線對齊。 |
| align-content |
設定伸縮項目在側軸上的對齊方式（適用於多條主軸線） |
stretch： 預設值，在側軸上拉伸。
flex-start： 側軸起點對齊。
flex-end： 側軸終點對齊。
center： 居中對齊。
space-between： 兩端無空隙，中間有空隙。
**space-around：**兩端空隙是中間空隙的一半。
**space-evenly：**兩端空隙與中間空隙一致。 |
設定給伸縮項目的屬性
| CSS 屬性名稱 |
意義 |
值 |
| flex-grow |
擴展比率 |
數字，預設值是0 |
| flex-shrink |
縮比率 |
數字，預設值是1 |
| flex-basis |
在主軸上的基準長度 |
指定長度，預設值是auto |
| #flex | ##複合屬性，同時設定grow shrink basis | grow shrink basis |
order | 伸展項目的排序 | 數字，預設值是0 |
#align-self | 單獨設定伸縮項目在側軸上的對齊方式 | **auto：**預設值，依照伸縮容器的設定。
stretch： 預設值，在側軸上拉伸。
flex-start： 側軸起點對齊。
flex-end： 側軸終點對齊。
center： 居中對齊。
baseline： 基線對齊。
|
示例如下：
CSS3 弹性盒（Flexible Box 或 flexbox ），是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。
容器 使用弹性盒布局的父元素 display:flex;
本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。
主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。
侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
Flex父容器属性
要改变元素的模式为伸缩容器，需要使用display属性。
display:flex | inline-flex
登入後複製
flex:设置为块级伸缩容器。
inline-flex:设置为内联级伸缩容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
div>div{
width:100px;
height:100px;
line-height:100px;
border:1px solid;
text-align:center;
margin:10px;
}
#box{
display:flex;
border:1px solid;
margin:20px;
}
#inline{
display:inline-flex;
border:1px solid;
margin:20px;
}
</style>
</head>
<body>
<div id="box">
<div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div id="inline">
<div>A</div><div>B</div><div>c</div><div>D</div>
</div>
</body>
</html>登入後複製
输出结果：
块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。
Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。
（学习视频分享：css视频教程、html视频教程）
以上是CSS伸縮盒佈局（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
