css3 中最出色的功能--flex 佈局-html教學-PHP中文網

首頁

web前端

html教學

css3 中最出色的功能--flex 佈局

零下一度

Jun 26, 2017 am 09:06 AM

csscss3flex佈局

flex 佈局是css3 中使用最頻繁也是最出色的功能，有點複雜，分為應用在容器上的屬性和項目上的屬性，即父元素上的與子元素上的屬性。

父元素上的屬性

display: flex
```
<style>div{display: flex; background-color: yellow;}b{background-color: red;}</style><body>  <div>      <b>a</b><b>b</b><b>c</b><b>d</b><b>e</b><b>f</b><b>g</b><b>h</b><b>i</b>  </div></body>
```
當父元素設定為 flex 後，其父元素本身會表現成區塊級元素，如果想表現為行內元素，可以使用 inline-flex。所有子元素不管是區塊級的還是行內的，會立即變成行內佈局，這是其他屬性的預設值所致的，後面可以修改。

flex-direction

<style>div{display: flex; background-color: yellow; margin: 5px;}div.row{ flex-direction: row;}div.row-reverse{ flex-direction: row-reverse;}div.column{ flex-direction: column;}div.column-reverse{ flex-direction: column-reverse;}b{background-color: red;}</style><body>  <div class="row">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="row-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="column">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="column-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div></body>

flex-direction 決定子元素的排列方向，預設值 row。

flex-wrap

<style>div{display: flex; background-color: yellow; margin: 5px; }div.nowrap{ flex-wrap: nowrap;}div.wrap{ flex-wrap: wrap;}div.wrap-reverse{ flex-wrap: wrap-reverse;}b{background-color: red; width: 100px;}</style><body>  <div class="nowrap">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="wrap">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="wrap-reverse">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div></body>

flex-wrap 決定子元素超出一行時該如何處理，預設值 nowrap 會壓縮子元素的寬度，wrap 是換行，wrap-reverse 則是往上增加新一行。注意：這是在主軸為X軸的前提下討論的。

justify-content

<style>b{background-color: red; }div{display: flex; background-color: yellow; margin: 5px; }div.start{ justify-content: flex-start;}div.end{justify-content: flex-end;}div.center{ justify-content: center;}div.space-between{ justify-content: space-between;}div.space-around{ justify-content: space-around;}</style><body>  <div class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="space-between">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="space-around">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div></body>

justify-content 決定子元素在主軸（目前是X軸）上的位置，預設值 flex-start。 space-between 與 space-around 的間隔是多餘空間平分出來的，但後者會為左右端也計入空間。

align-items

<style>b{background-color: red; width: 40px;}b:nth-child(1){}b:nth-child(2){font-size: 30px; height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; }div.start{ align-items: flex-start;}div.end{ align-items: flex-end;}div.center{ align-items: center;}div.baseline{ align-items: baseline;}div.stretch{ align-items: stretch;}</style><body>  <div class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="baseline">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="stretch">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div></body>

align-items 決定副軸（目前為Y軸）上元素的對其方式。預設值 stretch，表示當子元素不設定高度時，充滿父類別高度。

align-content

<style>b{background-color: red; width: 100px;}div{display: flex; flex-wrap: wrap; background-color: yellow; margin: 5px; height: 70px;}div.start{ align-content: flex-start;}div.end{ align-content: flex-end;}div.center{ align-content: center;}div.space-between{ align-content: space-between;}div.space-around{ align-content: space-around;}div.stretch{ align-content: stretch;}</style><body>  <div class="start">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="end">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="center">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="space-between">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="space-around">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div>  <div class="stretch">      <b>a</b><b>b</b><b>c</b><b>d</b>  </div></body>

align-content 表示子元素有多行時，每行在副軸（目前為Y軸）上的位置。預設值 stretch，表示變動子元素每行的高度，直到充滿父元素。

子元素上的屬性

order

<style>div{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{order: -1;}</style><body>  <div class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </div></body>

order 表示從小到大排列同級元素，預設值 0。

flex-grow

<style>div{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; }b.test{flex-grow: 1; background-color: green;}</style><body>  <div class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </div></body>

flex-grow 表示主軸（目前為X軸）上有剩餘空間時，平分空間時所佔的比例。預設值 0，表示不佔空間。目前空間平分比例為 0 : 0 : 1 : 0，所以 c 佔據所有剩餘空間。

flex-shrink

<style>div{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; width: 100px; flex-shrink: 0;}b.test{flex-shrink: 1; background-color: green;}</style><body>  <div class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </div></body>

flex-shrink 表示當主軸（目前為X軸）空間當不足以填滿所有子元素時，應該如何壓縮子元素，預設值 1，表示 1 : 1 : 1 : 1，即等比壓縮，目前比例為 0 : 0 : 1 : 0，表示所有空間由c 來壓縮。

flex-basis

<style>div{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b.test{flex-basis: 100px; background-color: green;}</style><body>  <div class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </div></body>

flex-basis 表示當主軸（目前為X軸）上平分空間前，先佔據的位置，當主軸為X軸，與設定 width 是等價的，當主軸為Y軸，與設定 height 是等價的。預設值 auto，表示與 width 或 height 相等。

align-self

<style>div{display: flex; background-color: yellow; margin: 5px;}b{background-color: red; flex-grow: 1;}b:nth-child(1){height: 20px;}b:nth-child(2){height: 40px;}b:nth-child(3){height: 50px;}b:nth-child(4){height: 60px;}b.test{align-self: flex-end; background-color: green;}</style><body>  <div class="start">      <b>a</b><b>b</b><b class="test">c</b><b>d</b>  </div></body>

特别注意，为简化布局理解，上面事例都使用了默认的 `flex-direction:row` 作为子元素排序方向为基础。如果改为 `flex-direction:column` ，主轴将为变成 Y 轴，而副轴将变成 X 轴，所有属性的效果将会改变，这个留给读者自行实践。

学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流群

以上是css3 中最出色的功能--flex 佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract