flex初識 一 基本屬性

2021-09-12 13:10:02 字數 612 閱讀 8466

flex-direction屬性:決定主軸的方向(即專案的排列方向);

flex-wrap屬性:規定如果一條軸線排不下,如何換行;

flex-flow屬性:是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row/nowrap;

justify-content屬性:定義了專案在主軸上的對齊方式;

align-items屬性:定義專案在交叉軸上如何對齊;

align-content屬性:定義了多根軸線的對齊方式;

下面是重點

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

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

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

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

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

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

flex布局容器和專案的基本屬性

flex布局篩子案例 首先在vscode中建立乙個篩子模型 篩子的頁內樣式 container item 使用flex布局首先清楚在盒子中加上display flex,盒子就是容器,引用flex後,須清楚四個概念,容器,專案,主軸,交叉抽概念。flex布局主要有倆個屬性,容器的屬性和專案的屬性。容器...

DOM基本屬性

查詢元素結點 1通過id查詢 document.getelemengbyid id 返回值為dom物件 2通過標籤名查詢 var demo document.getelementsbytagname li 返回乙個陣列集合 該集合由標籤名為li的元素結點組成 問題 集合元素只有li元素結點,那麼該結...

bash 基本屬性

bash基礎特性 命令歷史history 環境變數 histsize 命令歷史記錄的條數 histfile bash history histfilesize 命令歷史檔案記錄歷史的條數 history d 歷史命令數字 history c 刪除歷史命令 history 顯示歷史中最近的 命令 hi...