flex布局筆記1（基本概念與容器的屬性）

網頁布局的傳統解決方案為盒子模型，依賴於display + position + float屬性。這種解決方案的缺點是對於特殊布局的實現比較麻煩，如元素的垂直居中。

2023年w3c提出flex布局（flexible box）。即彈性布局。

任何乙個元素都可以作為彈性布局的容器。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。

採用flex布局的元素成為flex容器（flex container），所有的子元素自動成為容器成員，成為容器專案（flex item）

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。水平主軸的起始位置叫 main start，終止位置叫 main end。垂直交叉軸的起始位置叫 cross start，終止位置叫cross end。

專案預設沿主軸排列，單個專案占用的主軸空間叫做main size，占用的交叉軸空間叫做 cross size。

容器具有以下六個屬性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

.box

row-reverse：主軸為水平方向，起點在右端。

column：主軸為垂直方向，起點在上沿。

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

四個屬性值測試

彈性布局1

彈性布局2
彈性布局3
彈性布局4

.box

wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。

以上是同乙個div，帶乙個屬性名字的標題和12個色塊，其中只有flex-wrap值不同。三個屬性的區別可以明顯的看出來。

.box

.box

flex-end：對齊方式為主軸的終止位置

center：居中對齊

space-between：兩端對齊，專案之間的間隔都相等

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

.box

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

center：交叉軸的中點對齊。

baseline:專案的第一行文字的基線對齊。

stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

.box

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

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

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

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

stretch（預設值）：軸線佔滿整個交叉軸。

flex布局基本概念

box sizing box sizing content box 寬高只是內容的寬高，加入邊框和內邊距向外擴張 box sizing border box 寬高是總盒子的寬高，加入邊框和內邊距向內壓縮。flex布局 採用flex布局的元素，成為flex容器 box flex容器的所有子元素自動成為...

核心基本概念 筆記1

兩種操作模式 實模式和保護模式。在實模式下使用者只能使用1mb 的記憶體，且沒有任何保護。啟動過程中cpu會將實模式切換為保護模式。核心初始化 先執行實模式下的彙編 再執行保護模式下的init main.c檔案中的star kernel 函式。最後啟用init程序，init程序是所有程序的父程序。低...

基本概念 1

首先要知道ecmascript 中的一切都區分大小寫。識別符號就是變數 函式 屬性的名字，或者函式的引數。ecmascript使用的是c風格的注釋，包括單行注釋和塊級注釋。ecmascript 5 引用了嚴格模式的概念。要在整個指令碼中啟用嚴格模式，可以在頂部新增如下 use strict 在函式內...