小程式flex佈局

摘要： 標題圖 小程式開發規範 在學習小程式時，規範是特別重要的。 目錄的規範，所有元件要放在 components 目錄下，所有圖片要放在 images 目錄下，模型檔案時用於編寫各類業務的模型，需要放在 models 檔案下。 在 wx...

小程式開發規範

在學習小程式時，規範是特別重要的。

目錄的規範，所有元件要放在 components 目錄下，所有圖片要放在 images 目錄下，模型檔案時用於編寫各類業務的模型，需要放在 models 檔案下。

在 wxml 中如果可以單獨出現的標籤就單獨出現，每行程式碼不要太多，要適當換行等。要進行適當的註解說明。

在 css 中我們會用到 rpx 和 px ，我們會傻傻分不清楚到底用的是哪一個？通常情況建議間距用 rpx ，而字型大小，邊框使用 px 。

flex佈局-block，inline，inline-block

display 的預設值為 block ，為塊狀值。 inline 為行內元素， inline 是不可以設定高和寬的，注意哦~如果想要就可以變為 inline-block ，就可以設定高和寬了。

flex 為彈性盒子，彈性元素放到塊狀元素時就。 flex-direction:row 為水平排布， flex-direction: column 為垂直排列。 flex-direction:row-reverse ，為水平的倒序，顛倒後變右邊了， flex-direction:column-reverse 為列的倒序，沒有出現水平的情況，還是在上邊。如果沒有容器沒有設定高度的話，高度是自適應的，但是如果你給高度設定多餘的高度，它還是會偏移的，還是會向下偏移的。

justify-content: flex-start; justify-content: flex-end; 如果有 reverse 屬性，就會導致 flex-start 無反應，而 justity-content:flex-end 就會有反應，反而不是向下而是向上置頂。

一般向上對齊是 justify-content:flex-start; ，而向下對齊是 justify-content:flex-end; 而對於水平，向左對齊為 justify-content:flex-start; ，向右對齊為 justify-content:flex-end; 。

如果有 flex-direction: column-reverse; ，中有 reverse 起了作用，導致 justify-content: flex-start; 不起作用，反而 justify-content:flex-end; 起了作用。

justify-content: center; 為顯示居中。

display: flex;
flex-direction: row-reverse;
justify-content: center;
height: 300px;

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;

display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;

justify-content: space-between;
space-between平均分佈的效果。

display: flex;
flex-direction: row-reverse;
justify-content: space-between;

justify-content: space-around;
均相等，每個子項上下均相等。

display: flex;
flex-direction: column;
justify-content: space-around;

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

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

flex-direction: row-reverse;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
justify-content: space-around;
justify-content: space-between;

align-items: baseline;
align-items: center;
align-items: flex-end;
align-items: flex-start;
align-items: stretch;

align-items: stretch; 在沒有給高度的時候，會與背景拉昇同高度。

align-items: baseline; 基線

display: flex;
flex-direction: row-reverse;
flex-wrap: wrap
justify-content: center;
align-items: flex-start;

往後餘生，唯獨有你

簡書作者：達叔小生

90後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格： ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊