微信小程式之flex布局

flex布局在做前端的時候十分的方便快捷，這裡學習了一下分享給大家

flex（ flexible box：彈性布局盒模型）,是2023年w3c提出的一種可以簡潔、快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援：

簡單解釋一下概念圖，就是說flex支援橫向布局和縱向布局，然後有可以分為正向和反向

預設為block，所以使用flex時需要進行顯示宣告。

display:flex;

然後修改一下wxss檔案，加上使用flex布局的宣告

可以發現在使用flex布局後，每一塊之間的分行消失了。

##屬性一

flex-direction

flex-direction有4個可選值：

在使用flex布局的css出加上flex-direction

##屬性二

justify-content

justify-content有5個可選屬性值

在使用flex布局的css出加上flex-direction

.main

** align-items**

用flex布局可以很好地很快捷的排布整個頁面布局，祝大家開發愉快！

微信小程式之flex布局

flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...

微信小程式之Flex布局

flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...

微信小程式 flex布局

flex布局的特點 伸縮容器 使用display block 預設值 的 flex row style display block flex view item 1 view flex view item 2 view flex view item 3 view view 可以從效果圖看到block...