flexbox屬性歸納

歸納一下flex的屬性，以防自己忘記。

flex 布局，可以簡便、完整、響應式地實現各種頁面布局。

flext盒子有兩根軸，水平軸，垂直軸（方便自己記憶），flex盒子內的元素我們稱為item。

容器有6個屬性

flex-direction

flex-wrap
flex-flow
justify-content
align-items
align-content

order

flex-grow
flex-shrink
flex-basis
flex
align-self

row-reverse:右至左。

column:上至下（預設）。

column-reverse:下至上。

nowrap：不換行（預設）

wrap：換行

wrap-reverse：逆行換行。

flex-start:從軸頭至軸尾對其

flex-end:從軸尾至軸頭對其

center:居中

space-between:兩端對齊，中間均勻間隔

space-around: 空隙平均分布item兩側。

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（預設值）：軸線佔滿整個交叉軸。

flex-start:從軸頭至軸尾對其

flex-end:從軸尾至軸頭對其

center:居中

baseline:專案的第一行文字的基線對齊

stretch:item未設定高度或者為auto，高度佔整個容器。

.item

css 屬性歸納

屬性 描述css background 在乙個宣告中設定所有的背景屬性。1background attachment 設定背景影象是否固定或者隨著頁面的其餘部分滾動。1background color 設定元素的背景顏色。1background image 設定元素的背景影象。1background...

Flexbox學習筆記 flex專案屬性

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

flexbox 的相關屬性的運用

若是用 js 動態的新增 html 元素到有 flexbox 屬性的元素上，那麼渲染的時候 可能會有問題。css 如下 display flex 裡面的直接子元素相對於外層容器 水平居中,就可以不用table 讓未知寬度的元素水平居中了 display flex.justify content ce...