關於彈性盒子

2021-10-07 11:04:03 字數 1189 閱讀 8122

簡單來說,當給父框新增屬性,就可以把父框變成彈性盒子的容器了

先明白乙個概念:主軸和交叉軸

主軸是根據 flex-direction 的屬性值來確定的。當值為column時,主軸是垂直方向的。當值為row時,主軸是水平方向的。那麼交叉軸就是垂直於主軸的那條線。

彈性盒子的屬性分為容器屬性和子專案屬性。容器屬性是來控制整體樣式,加給容器裡邊的。子專案屬性是來調整單個元素的樣式。

- row(預設值):主軸為水平方向,起點在左端;

- row-reverse:主軸為水平方向,起點在右端;

- column:主軸為垂直方向,起點在上沿;

- column-reverse:主軸為垂直方向,起點在下沿。

- nowrap(預設):不換行;

- wrap:換行,第一行在上方;

- wrap-reverse:換行,第一行在下方。

- flex-start(預設值):左對齊;

- flex-end:右對齊;

- center: 居中;

- space-between:兩端對齊,專案之間的間隔都相等;

- space-around:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

- flex-start:交叉軸的起點對齊;

- flex-end:交叉軸的終點對齊;

- center:與交叉軸的中點對齊;

- space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布;

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

- stretch(預設值):軸線佔滿整個交叉軸。

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

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

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

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

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

stretch(預設值):軸線佔滿整個交叉軸。

flex彈性盒子,,彈性盒子布局

flex 彈性 布局 2009年w3c推出flex布局.可以簡便,完整,響應式的實現各種網頁布局 ie10 以往的網頁布局 layout 方式 基於盒模型,依賴display屬性 margin屬性 position屬性 float屬性特殊布局比較麻煩 比如元素的垂直居中 一.flex是什麼?flex...

彈性盒子(flexible box

將父元素盒子變為彈性盒子的方法 加display webkitt box 瀏覽器或設定為其他,box也可設定為inline box horizontal 設子元素為水平排列 預設 vertical 子元素為縱向排列start 子元素從開始位置對齊 大部分情況等同於左對齊 center 子元素居中對齊...

css彈性盒子

css3 彈性盒子 flexible box 或 flexbox 是一種 用於在頁面上布置元素的 布局模式,使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時,元素可 地執行。對於許多應用程式,彈性盒子模型提供了對塊模型的改進,因為它不使用浮動,flex容器的邊緣也不會與其內容的邊緣摺疊。css...