CSS3彈性盒模型

2021-08-06 05:35:14 字數 2542 閱讀 7661

一.方向和順序

彈性盒子的內容可以以任何方向和順序布局,這使布局更簡單,其功能通過以下幾個屬性實現:
1、flex-direction

值為row(預設值) | row-reverse | column | column-reverse,用於控制彈性盒子的內容在主軸上的放置方向。

row 與當前的寫模式相同,例如:中文就是從左到右,那麼flex-direction : row 就是在水平方向從左到右布局。

row-reverse同row正好相反。

column

2、flex-wrap

值為nowrap(預設值)| wrap | wrap-reverse
3、flex-flow

值為|。

flex-flow是flex-direction和flex-wrap的簡寫,預設值為row nowrap。

4、order

值為整數,預設為0,用於彈性盒子的子元素,目前不能用於其元素。對不可見的**裝置,像語音裝置等不會效果,也不會改變順序導航(eg:tabindex)。

彈性盒子中的子元素預設是按照他們在**中出現的順序顯示的,使用order可以改變子元素的顯示順序,這只是在視覺上呈現的一種改變,order值小的排在前面,大的排在後面。

markdown 是一種輕量級標記語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成格式豐富的html頁面。 —— [ 維基百科 ]

使用簡單的符號標識不同的標題,將某些文字標記為粗體或者斜體,建立乙個鏈結等,詳細語法參考幫助?。

本編輯器支援markdown extra,  擴充套件了很多好用的功能。具體請參考github.

markdown extra**語法:

專案**

computer

$1600

phone

$12pipe$1

可以使用冒號來定義對齊方式:

專案**

數量computer

1600 元

5phone

12 元

12pipe

1 元234

markdown extra定義列表語法:

專案1

專案2定義 a

定義 b

專案3定義 c

定義 d

定義d內容

**塊語法遵循標準markdown**,例如:

@requires_authorization

defsomefunc

(param1='', param2=0):

'''a docstring'''

if param1 > param2: # interesting

print

'greater'

return (param2 - param1 + 1) or

none

class

someclass:

pass

>>> message = '''interpreter

... prompt'''

生成乙個腳注1.

[toc]來生成目錄:

離線寫部落格

瀏覽器相容

使用mathjax渲染latex 數學公式,詳見math.stackexchange.com. x

=−b±

b2−4

ac−−

−−−−

−√2a

更多latex語法請參考 這兒.

可以渲染序列圖:

或者流程圖:

即使使用者在沒有網路的情況下,也可以通過本編輯器離線寫部落格(直接在曾經使用過的瀏覽器中輸入write.blog.csdn.net/mdeditor即可。markdown編輯器使用瀏覽器離線儲存將內容儲存在本地。

使用者寫部落格的過程中,內容實時儲存在瀏覽器快取中,在使用者關閉瀏覽器或者其它異常情況下,內容不會丟失。使用者再次開啟瀏覽器時,會顯示上次使用者正在編輯的沒有發表的內容。

部落格發表後,本地快取將被刪除。 

使用者可以選擇 把正在寫的部落格儲存到伺服器草稿箱,即使換瀏覽器或者清除快取,內容也不會丟失。

注意:雖然瀏覽器儲存大部分時候都比較可靠,但為了您的資料安全,在聯網後,請務必及時發表或者儲存到伺服器草稿箱

ie9以下不支援

ie9,10,11存在以下問題

不支援離線功能

ie9不支援檔案匯入匯出

ie10不支援拖拽檔案匯入

這裡是腳注的 內容. ↩

css3 彈性盒模型

1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定,兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...

Css3彈性盒模型

css3引入了新的盒模型 彈性盒模型,該模型決定乙個盒子在其他盒子中的分布方式以及如何處理可用的空間。這與xul 火狐使用的使用者互動語言 相似,其它語言也使用相同的盒模型,如xaml gladexml。使用該模型,可以很輕鬆的建立自適應瀏覽器視窗的流動布局或自適應字型大小的彈性布局。本文的例子使用...

CSS3 彈性盒模型

flex 是flex grow,flex shrink 和 flex basis的簡寫,預設值為0 1 auto。後兩個屬性可選。wrap reverse 是整體一行在反方向 這裡需要注意 align content 多行的時候才會奏效 stretch 預設值。元素被拉伸以適應容器。如果指定側軸大小...