flex屬性的學習

1.需要記住的屬性和值。

-------------------------------------------------------------

方向橫和縱

flex-direction: row | row-reverse | column | column-reverse;

-------------------------------------------------------------

超過怎麼辦。

flex-wrap: nowrap | wrap | wrap-reverse;

-------------------------------------------------------------

以上兩個的簡寫。

flex-flow
屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。

-------------------------------------------------------------

justify-content屬性定義了專案在主軸上的對齊方式。左對齊，右對齊，中間，兩端對齊，空間-環繞。

justify-content: flex-start | flex-end | center | space-between | space-around;

-------------------------------------------------------------

align-items屬性定義專案在交叉軸上如何對齊。

align-items: flex-start | flex-end | center | baseline | stretch;

-------------------------------------------------------------

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

------------------------------------------------------------

box 是舊屬性，已經被flex代替。

flex和box都是伸縮盒，具體細節有區別。

一些瀏覽器可能只支援box.

由於css3還是討論稿，所以一些屬性可能隨時被修改。

3.兩邊都是150px，中間的線的寬度自適應。

display屬性的Flex布局的學習

採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...

flex布局的屬性

flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...

Flexbox學習筆記 flex專案屬性

flexbox是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。flex屬性是用於設定彈性盒子的子元素如何分配空間。flex 屬性是 flex grow flex sh...