前端總結100點 1 flex

2021-10-06 17:36:59 字數 1118 閱讀 7895

學習資源

阮一峰的部落格

不自己敲敲,還是不靠譜

1、容器的屬性

// 1.1 主軸方向

flex-direction:row/row-reverse/column/column-reverse;(row)

// 1.2 是否可以換行

flex-wrap:nowrap/wrap/wrap-reverse;(nowrap)

// 1.3 主軸方向、是否換行簡寫

flex-flow:row nowrap;

// 1.4 主軸上的對齊方式

justify-content:flex-start/flex-end/center/space-between/space-around;(flex-start)

// 1.5 交叉軸上的對齊方式

align-item:flex-start/flex-end/center/baseline/stretch;(flex-start)

// 1.6 多個交叉軸的對齊方式

align-content:flex-start/flex-end/center/stretch/space-between/space-around;(flex-start)

2、 專案的屬性

// 2.1 排序編號,數字越小越在前

order: \// 2.2 有剩餘空間,放大的倍數

flex-grow:\;(0)

// 2.3 空間不足的時候,縮小的倍數

flex-shrink:\;(1)

// 2.4 預設情況下佔據主軸的空間

flex-basis:\| auto;(auto)

// 2.5 空間變化的縮寫

flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];(0 1 auto)

none:0 0 auto; auto:1 1 auto;

// 2.6 單個專案的對齊方式,可覆蓋align-item

align-self:auto/flex-start/flex-end/center/beseline/stretch;(auto)

// 85.8

學習舊島小程式 (1) flex 布局

css view 相當於 div 塊級元素 display 預設設定 block display inline 設定後 設定寬度高度是無效的 要設定寬度高度 又要設定為行內元素 我們設定 1 display inline block width 100px height 100px 2 flex 布...

前端總結1

標籤由英文尖括號 和 括起來,如就是乙個標籤。html中的標籤一般都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多了乙個 標籤與標籤之間是可以巢狀的,但先後順序必須保持一致。html標籤不區分大小寫,但建議小寫,因為大部分程式設計師都以小寫為準。doctype html 文件型別宣告,表示...

100個前端小知識點

1.jquery使用 元素 change 可以主動觸發onchange事件,但是僅僅是用於該事件僅適用於文字域 text field 以及 textarea 和 select 元素。同理有onclick 2.div如何在另乙個div裡邊居中 style margin auto left 0 righ...