微信小程式 Flex區域性元素被擠壓問題

2022-07-19 09:33:15 字數 812 閱讀 2907

關於flex布局不在此處贅述，需要了解的可以查閱官方文件：基本的布局方法——flex布局

當使用flex布局，想實現如下圖1的效果時，**編寫如下：

圖1：

<


view 


class


='test-view'


>


<


view 


class


='title'


view


>


<


view 


class


='content'


>內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容


view


>


view


>



/*


wxss檔案 


*/.test-view .title .content
但是執行結果卻得到圖2的效果，當後面的文字過多時，前面的view被擠壓了

圖2：

解決辦法：

給標題的view的樣式中新增一句：flex-shrink: 0; 即可得到圖一的效果，意思是flex的收縮為0，不壓縮的意思

.title

微信小程式 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...

微信小程式之flex布局

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

微信小程式開發 Flex布局

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