display
容器
專案主軸
交叉軸
容器的內容
display：
flex
display設定為
flex
，則當前標籤為容器，子元素為專案。
功能：所有子元素在一行顯示。
設定主軸方向：
flex-direction
·flex-direction
：row
；（主軸-從左往右）
·flex-direction
：row-reverse
；（改變主軸的方向-從右往左排列）
·flex-direction
：column
；（交叉軸-從上往下）
·flex-direction
：column-reverse
；（改變主軸的方向-從下往上排列）
換行：flex-wrap：
nowrap
；(不換行
) 預設值
flex-wrap：
wrap
；(換行
) 主軸是水平方向所有專案寬度之和大於容器寬度。
或主軸是垂直方向所有專案高度之和大於容器寬度。
主軸和換行的縮寫：flex-flow：
row wrap
；（水平方向位置
換行）justify-content主軸方向的對齊方式
情況1：主軸是水平方向：
justify-content: flex-start：左對齊（預設）起始對齊
justify-content: flex-end：
右對齊末尾對齊
justify-content :flex-center：
居中對齊
justify-content: space-around：
兩端對齊
元素間距相同
左右相加等於中間間距
justify-content: space-between; 元素間距相同，左右元素沒有間距
justify-content: space-evenly; 所有元素間距完全相同
文字的對齊方式
align-items：（不換行）
頂線 top line 中線
middle line
基線base line
底線 bottom line
flex-start：交叉軸的起點對齊。
flex-end：交叉軸終點對齊。
center： 交叉軸的中點對齊
baseline：專案的內容的文字的基線對齊
stretch：（預設值）如果未設定專案的高度或設為
auto
，則充滿容器的高度。
多根軸線對齊方式（換行）align-content
情況1：主軸是水平方向
flex-start 多行頂部對齊
flex-end 多行在底部對齊
center 多行垂直居中
space-between 垂直方向兩端對齊
space-around 垂直方向分散對齊
space-evely 垂直方向平均分配
標籤顯示模式 display
1 塊級元素 block 常見得塊級元素有 1.自己獨佔一行 2.可以設定寬度和高度，外邊距以及內邊距都可以控制 3.寬度預設是容器 父級寬度 得100 2 行內元素 inline 常見的行內元素有 等1.一行可以顯示多個行內元素 2.高度和寬度直接設定是無效得 3.預設寬度就是他本身內容得寬度 3...
標籤顯示模式（display）
html標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。具體如下 每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度 高度 對齊等屬性，常用於網頁布局和網頁結構的搭建。常見的塊元素有 等，其中標籤是最典型的塊元素。塊級元素的特點 1 總是從新行開始 2 高度，行高 外邊距以及...
Html常用標籤元素
建立乙個html文件 設定文件標題和其它在網頁中不顯示的資訊 設定文件的標題 最大的標題 預先格式化文字 下劃線黑體字 斜體字 打字機風格的字型 引用,通常是斜體 強調文字 通常是斜體加黑體 加重文字 通常是斜體加黑體 設定字型大小從1到7，顏色使用名字或rgb的十六進製制值 基準字型標記 字型加大...