HTML CSS父元素flex布局(學習整理)

2021-10-24 01:36:45 字數 446 閱讀 1808

display:flex 設定內部內容為flex布局

flex-wrap:wrap(換行) nowrap(不換行) flex子元素換行

flex-direction:row(預設橫向) column(豎向) flex布局方向

align-items:center(垂直於主軸居中)

justify-content:

space-between

均勻等分在盒子裡,並且兩邊沒有空格

space-around

均勻等分在盒子裡,並且兩邊有空格

center

沿主軸居中

flex-start

預設值 從左向右排列

flex-end

從右向左排列

若設定父元素為display:flex,同時設定任意乙個子元素樣式為flex:1,則子元素佔滿除了其兄弟元素以外的所有剩餘空間

HTML CSS浮動元素詳解

浮動定位是指 1.1將元素排除在普通流之外,即元素將脫離標準文件流 1.2元素將不在頁面占用空間 1.3將浮動元素放置在包含框的左邊或者右邊 1.4浮動元素依舊位於包含框之內 2.浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止 經常使用它來實現特殊的定位效果 3.包含框...

(19)HTML CSS筆記(flex布局)

1 彈性盒子模型 flex容器 定義彈性伸縮盒容器型別 用法 display flex 將物件作為塊級彈性彈性盒模型 display inline flex 將物件作為內聯塊級彈性彈性盒模型 之前學過display block inline block 2 flex容器 採用flex布局的元素,稱為...

html css 行級元素,塊級元素

偽選擇器 hover 行級元素 內聯元素 feature 1.內容決定所站位置 2.不可以通過css改變寬高 display inline 代表元素 span strong em a del 塊級元素 feature 1.獨佔一行 2.可以通過css改變寬高 display block 代表元素 d...