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...