css3 彈性盒 常用屬性筆記

2021-08-06 07:41:55 字數 1257 閱讀 3358

css3-3

多列:

column-count:設定列的個數 可以把一行文字分割成設定的列的個數。 如果設定了列的寬度 當列的最小寬度和 不夠總寬度的時候 列的數量就會縮小

column-width:可以設定列的最小寬度

column-span:設定列的橫跨數量 (常用於設定標題)

column-rule:設定分隔線 設定方式 與邊框的設定方式一樣 是乙個復合屬性

column-gap:設定列的間距

**查詢

@media (mix-width:600px) and or 其他條件

視口:用於設定移動端 顯示內容視窗的配置

處理**查詢不支援的方式

1.載入處理不相容的指令碼檔案

src="">

script>

src="">

script>

2.更改ie瀏覽器渲染內容時 使用的核心

content="ie=edge,chrome=1">justy-content:設定水平方向的排布方式

flex-start:預設設定 起始點位置對齊

flex-end:設定 結束點 對齊

center:以中心點對齊

space-between:設定 水平方向的間距 平均分配

space-around:設定 水平方向 平均分配 並且起始點和結束點 都佔間距的一半

align-items:設定垂直方向的 排列方式

flex-start baseline stretch 以起始點的位置 排列

flex-end:以結束點對齊

center:垂直方向居中

align-content:

flex-start:預設設定 起始點位置對齊

flex-end:設定 結束點 對齊

center:以中心點對齊

space-between:設定 垂直方向的間距 平均分配

space-around:設定 垂直方向 平均分配 並且起始點和結束點 都佔間距的一半

order:給元素 重新排序 數值越小的 越在前面

flex:設定元素的分配比例

npm常用操作指令:

install :安裝 i

-g: 安裝到全域性目錄(在任何工程中 都可以使用這個外掛程式)

uninstall:解除安裝

CSS 3 新彈性盒模型屬性

語法 flex none flex grow flex shrink flex basis 取值 復合屬性 設定或檢索彈性盒模型物件的子元素如何分配空間 如果縮寫flex 1,則其計算值為 1 1 0 box box3 li nth child 1 box3 li nth child 2 box3 ...

css3 彈性盒模型

1.box flex 定義盒子的彈性空間 子元素的尺寸 盒子的尺寸 子元素的box flex屬性值 所有子元素的box flex屬性值的和 例題 中間寬度固定,兩側寬度自適應 box div nth of type 1 box div nth of type 2 box div nth of typ...

css3彈性盒整理

1.彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。2.cs...