How to use Flex layout to achieve scrolling of fixed content area in the head

The fixed layout of the page header was previously implemented with position:fixed, but now it can be implemented with flex layout, which is quick and convenient.

Advantages of Flex layout: 1. Does not destroy the HTML document flow 2. Better compatibility.

display: flex and display: -webkit-box are just names for different stages and there is no difference.

<view>
 <view class="header"></view>
 <view class="content"></view>
</view>

page{
 display: -webkit-box; //Set elastic layout -webkit-box-orient: vertical; //Set sub-element vertical layout height: 100%;
}
.header:{
  height: 50px; //Set the head height (fixed position)
}  
.content:{
  -webkit-box-flex: 1; //Set 1 equal part to fill the full screen overflow: auto //Set overflow scrolling}

Note: If there is no response, remove the outer view

This concludes this article on how to use Flex layout to achieve scrolling of fixed content area in the header. For more relevant Flex header fixed content area scrolling content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!