關於CSS3中Flexbox佈局的圖文代碼分享
CSS3為我們提供了一種可伸縮的靈活的web頁面佈局方式-flexbox佈局，它具有很強大的功能，可以很輕鬆實現很多複雜佈局，在它出現之前，我們經常使用的佈局方式是浮動或固定寬度+百分比來進行佈局，程式碼量較大且難以理解。
為了更好理解flexbox佈局，這裡首先要介紹幾個概念：
#如果所示：
（1）主軸（側軸），flexbox佈局裡面將一個可伸縮容器按照水平和垂直方向分為主軸或側軸，如果你想讓這個容器中的可伸縮項目在水平方向上可伸縮展開，那麼水平方向上就是主軸，垂直方向上是側軸，反之亦然；
（2）主軸（側軸）長度，當確定了哪個是主軸哪個是側軸之後，在主軸方向上可伸縮容器的尺寸（寬或高）就被稱為主軸長度，側軸方向上的容器尺寸（寬或高）就被稱為側軸長度；
（3）主軸（側軸）起點，主軸（側軸）終點，例如主軸方向是水平方向，通常在水平方向上網頁佈局是從左向右的，那麼可伸縮容器的左border就是主軸起點，右border就是主軸終點，側軸是在垂直方向，通常是從上到下的，所以上border就是側軸起點，下border就是側軸終點；
（4）伸縮容器：如果要建造一個可伸縮的盒子，這些可伸縮的項目必須由一個display：flex的屬性的盒子包裹起來，這個盒子就叫做伸縮容器；
（5）伸縮項目：包含在伸縮容器中需要進行伸縮佈局的元素被稱作伸縮項目；
明確以上概念之後就可以來構建flexbox佈局了；
第一步，構建一個flexbox容器，並在容器中放置幾個可伸縮項目，如下：
css程式碼：
.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
}.flex-item{
background-color:blue;
width: 100px;
margin: 5px; }HTML程式碼：
<p class="flex-container">
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
</p>效果如下：
##
display：flex代表這個容器是一個可伸縮容器，還可以取值為inline-flex,兩者的區別在於前者將這個容器渲染為區塊級元素，後者將其渲染為內聯元素。
這裡有幾個預設的屬性雖然沒有設置，但是預設值確實起作用了，它們是：flex-direction#屬性，它的值為row，column，column-reverse，row-reverse,預設值為row，表示在水平方向上展開可伸縮項，如果取column代表在垂直方向上展開可伸縮項目，column-reverse， row-reverse代表相反方向，通俗講，flex-direction屬性就是用來定義主軸側軸方向的。 給予上述效果加入flex-direction：column效果如下：
# justify-content屬性，用來表示可伸縮項目在主軸方向上的對齊方式，可以取值為flex-start,flex-end,center,space-between,space-around，其中flex-start,flex-end,表示相對於主軸起點和終點對齊，center表示居中對齊， space-between表示兩端對齊並將剩餘空間在主軸方向上進行平均分配，space-around表示居中對齊然後在主軸方向上將剩餘空間平均分配
justify-content:space-betweencss程式碼：.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-between;
}.flex-item{
background-color:blue;
width: 100px;
margin: 5px;
}
.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
}.flex-item{
background-color:blue;
width: 100px;
margin: 5px;
}
################################### # 可以看到這個屬性讓可伸縮項目沿著主軸方向進行了居中對齊並且均分了剩餘空間；#########align-items###屬性：該屬性是用來表示可伸縮項目在側軸方向上的對齊方式，可取的值有flex-start,flex-end,center,baseline,stretch，需要解釋的是baseline值，它是按照一個計算出來的基準線然後讓這些項目沿著這個基準線對齊，基準線的計算取決於可伸縮項目的尺寸及內容，如下：######align-items:baseline;######css程式碼：###
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
}
.flex-item{
background-color:blue;
width: 100px;
margin: 5px;; }
.a{
margin-top: 10px;
height: 100px;
}
.b{
margin-top: 20px;
height: 150px;
}
.c{
margin-top: 30px;
height: 80px;
}HTML代码：
<p class="flex-container">
<p class="flex-item a">A</p>
<p class="flex-item b">B</p>
<p class="flex-item c">A</p>
<p class="flex-item a">B</p>
</p>效果如下：
可以看到四个可伸缩项目在侧轴方向上（垂直方向）高度不一，margin不一样，但是最后都按照计算出来的一个基准线对齐；
align-items:stretch;
这个是取值会让可伸缩项目在侧轴方向上进行拉伸，前提是这些项目在侧轴方向上没有设置尺寸，否则会按照你设置的尺寸来渲染。
css代码：
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:stretch;
}
.flex-item{
background-color:blue;
width: 100px; /*height: 100px;*/
margin: 5px;; }HTML代码：
<p class="flex-container">
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
</p>效果如下：
可以看到这些可伸缩项目在侧轴方向上被拉伸了，因为在垂直方向上没有设置高度。
到目前为止，我们所有的伸缩项目都是在一行或者一列上进行的，并没有进行换行和换列，flex-wrap属性表示是否支持换行或者换列，它有nowrap,wrap,wrap-reverse三个取值，nowrap是默认值，表示不换行或者换列，wrap表示换行或者换列，wrap-reverse表示支持换行或者换列，但是会沿着相反方向进行排列（如主轴是垂直方向换行后就按照先下后上的顺序来排列伸缩项）
css代码：
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
flex-wrap: wrap;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }HTML代码：
<p class="flex-container">
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
<p class="flex-item ">A</p>
<p class="flex-item ">B</p>
<p class="flex-item ">A</p>
<p class="flex-item ">B</p></p>效果如下：
可以看到伸缩项增多之后一行难以放下的时候会接着换行。wrap属性保证换行后按照正常的从上到下顺序排列
align-content属性用来表示换行之后各个伸缩行的对齐方式，它的取值有 stretch,flex-start,flex-end,center,space-between,space-around，意义和align-items属性取值意义相同，上面我们将7个伸缩项目分成了两行来排列，
将css代码添加align-content属性，html代码不变，如下：
CSS代码：
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
flex-wrap: wrap;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }效果如下：
可以看到两个伸缩行在侧轴（垂直）方向上两端对齐了。
flex-flow属性，该属性是个复属性，它是flex-direction和flex-wrap的复合属性，flex-direction：row;flex-wrap:wrap就等同于flex-flow:row wrap
order属性，该属性用来表示伸缩项目的排列方式，正常情况下伸缩项目会按照主轴起点到主轴终点排列，遇到换行或者换列会按照从侧轴起点到终点进行排列（除非设置了某些 对齐方式的reverse），但是某些情况下这种默认显示顺序不符合要求，可以采用给伸缩项添加order属性来指定排列顺序，默认情况下，每个伸缩项的order都是0，改属性可正可负，越大的值会被排列在越后面。
css代码：
.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
flex-flow: row wrap;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }
.order1{
order:1;
}
.order2{
order:2;
}HTML代码：
<p class="flex-container">
<p class="flex-item order1">1</p>
<p class="flex-item order2">2</p>
<p class="flex-item ">3</p>
<p class="flex-item ">4</p>
<p class="flex-item ">5</p>
<p class="flex-item ">6</p>
<p class="flex-item ">7</p>
<p class="flex-item ">8</p></p>效果如下：
默认情况下，会按照HTML的顺序1-8进行显示，但是由于给p1和2设置了大于0的order,所以他们被放在了最后显示（因为其他没有被设置的p的order默认属性都是0）
margin属性在flexbox布局中有很强大的作用，如果给某个可伸缩项设置某个方向上的margin为auto，那么这个可伸缩项就会在这个方向上占用该方向的剩余空间来作为自己的这个方向上的margin。
css代码：
.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
flex-flow: row wrap;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }
.a{
margin-right:auto;
}HTML代码：
<p class="flex-container">
<p class="flex-item a">1</p>
<p class="flex-item ">2</p>
<p class="flex-item ">3</p></p>效果如下：
由于给伸缩项1添加了margin-right为auto，所以它独占了本行的剩余空间作为它的right margin值。
利用这个特性，我们在flexbox布局中很容易实现可伸缩元素的垂直水平居中，
css代码;
.flex-container{
display:flex;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
flex-flow: row wrap;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }
.a{
margin:auto;
}HTML代码：
<p class="flex-container">
<p class="flex-item a">1</p></p>效果如下：
align-self属性，该属性是给各个可伸缩项设置自己的在侧轴上的对齐方式的，之前在容器上设置的align-item属性是作为一个整体设置的，所有的元素对齐方式都一样，align-self属性会覆盖之前的align-item属性，让每个可伸缩项在侧轴上具有不同的对齐方式，取值和align-item相同：
css代码：
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }
.a{
align-self:flex-start ;
}
.b{
align-self:flex-end;
}
.c{
align-self:center;
}html代码：
<p class="flex-container">
<p class="flex-item a">1</p>
<p class="flex-item b">2</p>
<p class="flex-item c">3</p></p>效果如下：
可以看到三个伸缩项在侧轴上被赋予了不同的对齐方式。
flex属性，这个属性是加在伸缩项上面的，它定义了伸缩项如何分配主轴尺寸，通常取值为auto或者数字，auto浏览器会自动均分，数字会按照伸缩项所占的数字比重来分配空间，
这个属性会覆盖伸缩项在主轴上设定的尺寸，当给主轴上伸缩项设定了尺寸（宽或高）和这个属性的时候，事实上还是会按照这个属性来进行空间分配。
css代码：
.flex-container{
display:flex;
flex-direction: row;
width:600px;
height:230px;
background-color: #ccc;
justify-content: space-around;
align-items:baseline;
align-content: space-between;
}
.flex-item{
background-color:blue;
width: 100px;
height: 70px;
margin: 5px;; }
.a{
align-self:flex-start ;
flex:1;
}
.b{
align-self:flex-end;
flex:2;
}
.c{
align-self:center;
flex:1;
}HTML代码：
<p class="flex-container">
<p class="flex-item a">1</p>
<p class="flex-item b">2</p>
<p class="flex-item c">3</p></p>效果如下：
可以看到伸缩项尽管设置了宽度，但是最终还是按照我们设置的flex比例对水平空间进行了分割。
以上是關於CSS3中Flexbox佈局的圖文代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Windows 11: 匯入和匯出開始佈局的簡單方法
Aug 22, 2023 am 10:13 AM
在Windows11中，「開始」功能表經過重新設計，並具有一組簡化的應用，這些應用程式排列在頁面網格中，這與它的前身不同，後者在「開始」功能表上有資料夾、應用程式和組。您可以自訂「開始」功能表佈局，並將其匯入並匯出至其他Windows設備，以根據您的喜好進行個人化設定。在本指南中，我們將討論在Windows11上匯入開始佈局以自訂預設佈局的逐步說明。什麼是Windows11中的Import-StartLayout？導入開始佈局是Windows10和更早版本中使用的cmdlet，用於將「開始」功能表的自定
如何在 Windows 11 中儲存桌面圖示位置佈局
Aug 23, 2023 pm 09:53 PM
Windows11在使用者體驗方面帶來了很多東西，但迭代並不完全防錯。使用者不時會遇到問題，圖示定位的變更很常見。那麼如何在Windows11中保存桌面佈局呢？該任務有內建和第三方解決方案，無論是保存當前視窗的螢幕解析度還是桌面圖示的排列。對於桌面上有一堆圖示的使用者來說，這一點變得更加重要。繼續閱讀以了解如何在Windows11中儲存桌面圖示位置。為什麼Windows11不儲存圖示佈局位置？以下是Windows11不保存桌面圖示佈局的主要原因：對顯示設定的變更：通常，當您修改顯示設定時，配置的自訂
WordPress網頁錯位現象解決攻略
Mar 05, 2024 pm 01:12 PM
WordPress網頁錯位現象解決攻略在WordPress網站開發中，有時候我們會遇到網頁元素錯位的情況，這可能是由於不同裝置上的螢幕尺寸、瀏覽器相容性或CSS樣式設定不當所致。要解決這種錯位現象，我們需要仔細分析問題、找出可能的原因，並逐步進行除錯和修復。本文將分享一些常見的WordPress網頁錯位問題以及對應的解決攻略，同時提供具體的程式碼範例，幫助開
如何使用HTML和CSS建立響應式輪播圖佈局
Oct 20, 2023 pm 04:24 PM
如何使用HTML和CSS建立一個響應式輪播圖佈局在現代的網頁設計中，輪播圖是一個常見的元素。它能夠吸引用戶的注意力，展示多個內容或圖片，並且能夠自動切換。在本文中，我們將介紹如何使用HTML和CSS建立一個響應式的輪播圖佈局。首先，我們需要建立一個基本的HTML結構，並且加入所需的CSS樣式。以下是一個簡單的HTML結構：<!DOCTYPEhtml&g
介紹win7裡的視窗排列方式
Dec 26, 2023 pm 04:37 PM
當我們同時開啟多個視窗時，win7具有將多個視窗以不同方式排列然後同時顯示的功能，能夠讓我們更清晰地查看到每個視窗的內容。那麼win7窗口排列方式有幾種呢，他們分別都是什麼樣的呢，下面就跟著小編一起來看一下吧。 win7視窗排列方式有幾種答案：三種，分別是層疊視窗、堆疊顯示視窗和並排顯示視窗。當我們開啟多個視窗時，可以右鍵點擊任務欄空白處。就可以看到三種視窗排列方式了。一、層疊視窗：二、堆疊顯示視窗：三、並排顯示視窗：
CSS 佈局屬性最佳化技巧：position sticky 和 flexbox
Oct 20, 2023 pm 03:15 PM
CSS版面配置屬性最佳化技巧：positionsticky和flexbox在網頁開發中，版面是一個非常重要的面向。良好的佈局結構可以提高使用者體驗，使頁面更加美觀和易於導航。而CSS佈局屬性則是達成此目標的關鍵。在本文中，我將介紹兩種常用的CSS佈局屬性最佳化技巧：positionsticky和flexbox，並提供特定的程式碼範例。一、positions
H5中position屬性的靈活運用技巧
Dec 27, 2023 pm 01:05 PM
H5中如何靈活運用position屬性在H5開發中，常會涉及到元素的定位和佈局問題。這時候，CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式，包括相對定位（relative）、絕對定位（absolute）、固定定位（fixed）和黏附定位（sticky）。本文將詳細介紹在H5開發中如何靈活運用position屬性
CSS中contain的語法使用場景
Feb 21, 2024 pm 02:00 PM
CSS中contain的語法使用場景在CSS中，contain是一個有用的屬性，用於指定元素的內容是否獨立於其外部樣式和佈局。它可以幫助開發者更好地控制頁面佈局和優化效能。本文將介紹contain屬性的語法使用場景，並提供具體的程式碼範例。 contain屬性的語法如下：contain:layout|paint|size|style|'none'|'stric
