CSS伸縮盒佈局（總結分享）-css教學-PHP中文網

這篇文章為大家帶來了關於css的相關知識，其中主要介紹了關於css伸縮盒佈局的相關問題，一個元素設定CSS 屬性display:flex 或者display:inline-flex ，該元素就變成伸縮容器，下面一起來看一下，希望對大家有幫助。

CSS伸縮盒佈局（總結分享）

（學習影片分享：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。

order: 1;

登入後複製

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：兩端空隙與中間空隙一致。

設定給伸縮項目的屬性

##複合屬性，同時設定grow shrink basisgrow shrink basisorder伸展項目的排序數字，預設值是0#align-self單獨設定伸縮項目在側軸上的對齊方式**auto：**預設值，依照伸縮容器的設定。

示例如下：

CSS3 弹性盒（Flexible Box 或 flexbox ），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

容器使用弹性盒布局的父元素 display:flex;

本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。

CSS伸縮盒佈局（總結分享）

主轴：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>

登入後複製

输出结果：

CSS伸縮盒佈局（總結分享）

块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。

　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。

（学习视频分享：css视频教程、html视频教程）

CSS 屬性名稱	意義	值
flex-grow	擴展比率	數字，預設值是0
flex-shrink	縮比率	數字，預設值是1
flex-basis	在主軸上的基準長度	指定長度，預設值是auto
#flex

		stretch：預設值，在側軸上拉伸。 flex-start：側軸起點對齊。 flex-end：側軸終點對齊。 center：居中對齊。 baseline：基線對齊。