關於flex布局的總結

2021-10-08 17:13:31 字數 1115 閱讀 2758

1.開啟了flex布局的元素叫: flex container

2.裡面的直接子元素叫:flex items(預設情況下,所有item都會在一行顯示)

3.display屬性由flex和inline-flex

1.應用在flex container上的css屬性:

flex-flow:     flex-direction和flex-wrap的縮寫屬性

flex-direction: 決定主軸方向,預設是row(從左到右),row-reverse(主軸從右到左),column(從上到下)  column-reverse(從下到上)

flex-wrap:nowrap(不換行)  wrap(換行顯示)

justify-content(主軸):(決定flex item在main axis上的對齊方式2)flex-start(預設值與main start對齊)  flex-end(與main-end對齊)  center(居中對齊)   space-between(兩端對齊,中間距離相等)  space-evenly(所有距離相等,包括兩邊) space-around(兩邊的距離是中間距離的一半)

align-items(交叉軸): flex-start(剛開始位置(csross start)開始對齊) flex-end((cross-end)開始對齊)  center(中心點對齊)   baseline(基線對齊)

align-content:(交叉軸,與align-items類似,決定多行flex items)flex-start(交叉軸決定多行依次排) flex-end(從下往上)  center(居中) space-between(貼上下) space-evenly(平均) space-around()

2.應用在flex items上的css屬性:

flex: 後三個的縮寫屬性,

flex-grow: 決定flex-item如何擴充套件

flex-basis: 設定flex items在主軸上的base size

flex-shrink:決定flex items如何收縮

order: (值小排在前面,用的較少)

align-self: (決定單個元素,可以覆蓋flex container的align-items屬性 用的較少)

關於flex布局

任何乙個容器都可以指定為flex 布局。box行內元素也可以使用flex布局。box需要注意的是,設為flex布局以後,子元素的float clear和vertical align屬性將失效弄清楚 幾個基本的概念 我們知道盒子模型 下面可以理解為 flex 模型 容器預設存在兩根軸 水平的主軸 ma...

Flex布局 flex布局的詳細用法總結

tips 行內元素也可以使用 flex 布局 box 注意 flex 布局以後,子元素的float clear和vertical align屬性將失效 概念 採用 flex 布局的元素,稱為 flex 容器,簡稱 容器 它的所有子元素自動成為容器成員,稱為 flex 專案,簡稱 專案 六個屬性 1....

總結 Flex布局

網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案,基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便,比如,垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...