flex實現多列布局效果 對角線布局

題目：用 css 實現如下的多列布局效果：父元素寬度自適應，子元素數量隨機可變的（假如 8 個），每一行有 3 個子元素，子元素之間的水平間距為 10px ，子元素的寬度自適應父元 素的寬度（(父元素寬度 - 10px * 2) / 3），子元素的高度與本身的寬度成正比（比如 2:1 ）

效果如下：

涉及到的知識點：

1.flex布局相關

2.calc計算屬性，（運算符號兩遍要有空格）calc((100% - 10px * 2) / 6)

3. padding和margin的百分比相對的是父元素的寬度

4. :nth-child(3n):不要帶運算符號*

html結構如下：div裡面有8個p標籤

div 

p p:nth-child(3n) 

步驟二：cacl計算出元素的寬度

步驟三：由於最後一行需要左對齊所以最好使用margin-right來控制間距，而不是用justify-content: space-between;

題目：實現乙個對角線布局

效果如下

css：關鍵點就乙個justify-content不同的對齊方式

div 

div:nth-child(1) 
div:nth-child(2) 
div:nth-child(3) 
p 

phpexcel遍歷所有列 對角線遍歷

給定乙個含有 m x n 個元素的矩陣 m 行，n 列 請以對角線遍歷的順序返回這個矩陣中的所有元素，對角線遍歷如下圖所示。示例 輸入 1,2,3 4,5,6 7,8,9 輸出 1,2,4,7,5,3,6,8,9 解釋 說明 給定矩陣中的元素總數不會超過 100000 關鍵在於找規律，將規律歸類，但...

leetcode 對角線遍歷（js實現）

給定乙個含有 m x n 個元素的矩陣 m 行，n 列 請以對角線遍歷的順序返回這個矩陣中的所有元素，對角線遍歷如下圖所示。示例 輸入 1,2,3 4,5,6 7,8,9 輸出 1,2,4,7,5,3,6,8,9 解釋 兩種移動方向 處理上下左右編輯問題 越界即轉彎 param matrix ret...

flex 多欄多列彈性布局

可設定的屬性有 align items flex direction align content justify content flex wrap flex align self flex grow flex shrink flex basis 前提 父元素設定了display flex alig...