flex布局學習1

2021-09-29 18:05:15 字數 625 閱讀 1632

flex的item之間預設沒有間隔

flex-grow屬性

2.1 flex布局預設不修改元素的寬度

2.2 彈性布局預設左對齊

當有兩個元素進行彈性布局時,如果我們希望另乙個佔據剩餘父元素的所有寬度時,可以設定這個元素的flex-grow屬性為1

flex-grow屬性預設為0,即保持預設寬度,當設定為1時,表示該專案寬度拉伸,佔據該行剩餘所有寬度

input

align-self屬性和align-items屬性

3.1 彈性布局預設修改元素的高度,如果專案沒有顯式指定高度,就將佔據元素的所有高度

3.2 align-self可以改變這種特性

input
align-self屬性可以取四個值:

3.3 如果專案很多,乙個個設定align-self屬性就很麻煩。這時可以在容器元素,設定align-items屬性,它的值被所有子元素的align-self屬性所繼承

form
在容器元素上設定了align-items屬性,就可以不用在子元素上設定align-self屬性,除非兩者不一致

flex布局學習

內容 flex 是 flexible box 的縮寫,意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後,子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素,稱為 flex 容器 flex...

flex布局學習

flex flexible box 是一種彈性布局,用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後,子元素的float clear和ver...

flex布局布局之flex 1屬性詳解

採用flex布局的元素,稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員,稱為flex專案 flex item 簡稱 專案 容器預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做main...