html最新的flex佈局的理解-html教學-PHP中文網

要注意的是任何容器都可以指定為flex佈局，但是在flex佈局中float、clear、vertical-align都會失效。

主軸方向

主軸方向的對齊方式

縱向單行對齊方式！

子項目換行

縱向多行對齊方式！

以上皆是加入父元素身上的屬性

子項目的一些屬性

首頁

web前端

html教學

html最新的flex佈局的理解

一个新手

Oct 09, 2017 am 10:29 AM

flex html 理解

每當我們去進行前端頁面佈局時都會用到float、position、margin等一些屬性，這些屬性用起來略顯麻煩，並且瀏覽器去進行渲染時會大大消耗性能

所以今天我們來談談最新的flex佈局，也叫彈性佈局！

要注意的是任何容器都可以指定為flex佈局，但是在flex佈局中float、clear、vertical-align都會失效。

主軸方向

flex容器分為x軸與y軸，x軸正方向預設由左至右，y軸正方向預設由上而下。

定義一個容器為彈性佈局display:flex;主軸預設方向為左到右；

如果我們想去改變flex的預設方向，就需要用到flex-direction屬性flex- direction有四個屬性值，分別是row、row-reverse、column、column-reverse，分別是由左到右、從右到左、由上往下、從下往上！

主軸方向的對齊方式

justify-content:flex-start则主轴为左对齐
justify-content:flex-end 则主轴为右对齐
justify-content:center 则主轴为居中
justify-content:space-between则每个子项目之间等距离，前提是有剩余空间
justify-content:space-around则每个子项目会平分剩余空间，子项目与父元素边界处也会存在距离

縱向單行對齊方式！

align-item:flex-start纵向从上到下
align-item:flex-end纵向从下到上
align-item:center纵向居中对齐
align-item:baseline以基线对齐
align-item:strech这是默认方式

子項目換行

flex-wrap:wrap超出父元素会换行
flex-wrap:wrap-reverse反向换行
flex-wrap:no wrap这是默认方式,不换行

縱向多行對齊方式！

align-content:flex-start上对齐
align-content:flex-end下对齐
align-content:center上下居中
align-content:space-between
align-content:space-around

以上皆是加入父元素身上的屬性

子項目的一些屬性

order:0,定义子项目的排序位置，数值越小越靠前，默认为0
flex-grow:0;定义子项目的放大比例，默认为0不放大
flex-shrink:1;定义子项目的缩小比例，默认为1，空间不足将等比缩小，0则不缩小，负值无效
flex-basis:1;定义子项目占据空间，默认为auto，可以设置百分比，也可以是固定值

以上三種屬性可以簡寫，例如flex：1,1,1順序如上

如有錯誤，歡迎大家指正，一起努力吧！

以上是html最新的flex佈局的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Laravel 教程

1603

PHP教程

1508

276

Related knowledge

如何在HTML中創建一個無序的列表？ Jul 30, 2025 am 04:50 AM

要創建HTML無序列表，需使用標籤定義列表容器，每個列表項用標籤包裹，瀏覽器會自動添加項目符號；1.使用標籤創建列表；2.每個列表項用標籤定義；3.瀏覽器自動生成默認圓點符號；4.可通過嵌套實現子列表；5.使用CSS的list-style-type屬性可修改符號樣式，如disc、circle、square或none；正確使用這些標籤即可生成標準無序列表。

語義HTML對於SEO和可訪問性的重要性 Jul 30, 2025 am 05:05 AM

semantichtmlimprovesbothseoandAccessibility formaningfultagSthatConveyContentsUrture.1）ItenhancesseothRoughBetterContterContenterContenterContenchyArchyWithProperHeadingLeheadinglevels，ifravedIndexingViaeLementLikeAnd，andsupportFortForrichSnippersingsundsustructussunddbuestussund.2）

如何在HTML中嵌入PDF文檔？ Aug 01, 2025 am 06:52 AM

使用標籤是最簡單且推薦的方法，語法為，適用於現代瀏覽器直接嵌入PDF；2.使用標籤可提供更好的控制和備用內容支持，語法為，並在標籤內提供下載鏈接作為不支持時的備用方案；3.可選通過GoogleDocsViewer嵌入，但因隱私和性能問題不建議廣泛使用；4.為提升用戶體驗，應設置合適的高度、使用響應式尺寸（如height:80vh）並提供PDF下載鏈接，以便用戶自行下載查看。

HTML中鏈接標籤中rel屬性的目的是什麼？ Aug 03, 2025 pm 04:50 PM

rel =“ stylesheet” linkscssfilesfilesforstylingthepage; 2.rel =“ pRELOAD” hintstopreloadcritical ricationResourcesourcesorforperformance; 3.rel =“ icon” setSthewebsite’sfavicon; 4.Rel =“ 4.REL =“ necter” selfertAltate's supportAlternate'sporlateRateSlikerSsorsSorsorSorprint; 5.ReL; 5.REL; 5.REL = REL =＆QU＆QU＆QU＆QU

如何以HTML表單創建搜索輸入字段 Aug 02, 2025 pm 04:44 PM

Usetheelementwithinatagtocreateasemanticsearchfield.2.Includeaforaccessibility,settheform'sactionandmethod="get"attributestosenddatatoasearchendpointwithashareableURL.3.Addname="q"todefinethequeryparameter,useplaceholdertoguideuse

HTML中錨標籤的目標屬性的目的是什麼？ Aug 02, 2025 pm 02:23 PM

ThetargetattributeinanHTMLanchortagspecifieswheretoopenthelinkeddocument.1._selfopensthelinkinthesametab(default).2._blankopensthelinkinanewtaborwindow.3._parentopensthelinkintheparentframe.4._topopensthelinkinthefullwindowbody,removingframes.Forexte