彈性盒子
彈性盒子是css3的一種新的布局模式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行 排列、對齊和分配空白空間。
display:flex/inline-flex
設定flex布局後，子元素的float、clear和vertical-align屬性將失效
.box
.box
flex-direction 決定主軸的方向(即專案的排列方向)
row （預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
justify-content 定義了專案在主軸上的對齊方式
flex-start （預設值）：左對齊。
flex-end：右對齊。
center： 居中。
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的 間隔大一倍
space-evenly : 所有間隔都相等，包括專案與專案，專案與邊框。
align-items 定義專案在交叉軸上如何對齊
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
flex-wrap 預設情況下，專案都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，如果一 條軸線排不下，如何換行。
nowrap （預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
專案屬性 （設定在子元素上面）
order 定義專案的排列順序。數值越小，排列越靠前，預設值為0
〈integer〉：數值
flex-grow 定義專案的放大比例，預設為0,即如果存在剩餘空間，也不放大。
〈number〉: 數值
flex-shrink 定義專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。
〈number〉: 數值
align-self 定義彈性容器內被選中專案的對齊方式，和彈性容器的align-items屬性作用相同， 此屬性用於專案。
auto 預設值。元素繼承了它的父容器的align-items屬性。如果沒有父容器 則為"stretch"。
stretch佔滿整個容器的髙度。自身不設定固定高度
center交叉軸的中點對齊。
flex-start 交叉軸的起點對齊。
flex-end 交叉軸的終點對齊。
baseline 專案的第一行文字的基線對齊。
預處理預處理編譯工具koala
less基本語法
注釋
less共有兩種注釋風格。
標準的css注釋/* comment */ ,會保留到編譯後的檔案。
單行注釋// comment,只保留在less原始檔中，編譯後被省略。
import匯入樣式
引入.css檔案同於css的import命令。
@import "reset.css"；
變數
less允許開發者自定義變數，變數可以在全域性樣式中使用，變數使得樣式修改起來 更加簡單。
變數以@開頭，變數名與變數值之間用【冒號】分隔
@color:red;
div
@side:left;
.box -width:5px;
}
混合可以將乙個定義好的class a引入到另乙個class b中，從而實現class b繼承 class a中的所有屬性。我們還可以帶引數地呼叫，就像使用函式一樣。
呼叫class
.border
#box
.border-radius(@radius).border-radius(@radius:5%).box-shadow(@x:0, @y:0, @blur:1px, @color:#000)選擇器巢狀
div
}}
.public
// div .box
div .box:extend(.public)
.boxflex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
布局（flex布局）
彈性盒模型 display flex，排列方式根據主軸方向排列。子元素超出預設不換行，而是進行壓縮 flex direction 彈性盒模型主軸方向設定 row 預設 從左到右 側軸 從上到下 row reverse 從右到左 側軸 從上到下 column 從上到下 側軸 從左到右 column r...
flex 平鋪布局 Flex 布局教程
網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position屬性 float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。2009年，w3c 提出了一種新的方案 flex 布局，可以簡便 完整 響應式地實現各種頁...