Flex layout realizes the layout mode of upper and lower fixed and middle sliding

This article mainly introduces the layout method of flex layout to achieve the upper and lower fixed and middle sliding layout, and shares it with you, as follows:

For example, on a page like this, you would like to have a header image, a bottom bar, and a slidable content area in the middle.

Briefly introduce how to achieve

Fixed header and footer, slideable middle, using flex layout
1. Set html and body height to 100%
2. Set the layout of the outermost div to flexible layout display:flex;
3. Set the main axis direction of the outermost div to flex-direction: column; the main axis is vertical, and the starting point is at the top edge
row (default): The main axis is horizontal, with the starting point at the left end.
row-reverse: The main axis is horizontal and the starting point is at the right end.
Column: The main axis is vertical, and the starting point is at the top edge.
column-reverse: The main axis is vertical and the starting point is at the bottom edge.
4. Set the height of the outermost div to 100%
5. Write the header style normally
6. Write the tail style normally
7. The middle style is flex: 1; overflow: hidden or overflow: auto; -webkit-overflow-scrolling: touch. The latter will have problems when sliding on iOS phones. It is recommended to use a plug-in.

HTML part:

<div class="main-warp">
    <div class="header">
      <img src="imgurl" class="header-img" alt>
    </div>
    <div class="content">
      <div class="content-scroll">
        <div class="shop-box">
          <img src="imgurl" alt>
        </div>
        <div class="shop-box">
          <img src="imgurl" alt >
        </div>
        <div class="shop-box">
          <img src="imgurl" alt >
        </div>
        <div class="shop-box">
          <img src="imgurl" alt >
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>

js part:

<script>
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      
    }
  },
 
  components:
  },
  methods: {
 
  },
 
  computed: {
 
  },
 
  mounted () {
    this.$nextTick(function () {
      /* eslint-disable no-new */
      let pageBottom = document.querySelector('.content')
      new BScroll(pageBottom, { click: true })
    })
  },
  created () {
  }
}
</script>

Style part:

<style lang="less" rel="stylesheet/less" type="text/less">
@r: 100;
// Fixed the head and footer, the middle part is slidable, using flex layout // html,
body {
  background: url("//storage.jd.com/1901/04nianhuojie/02lingquanbg_02.png")
    repeat-y;
  background-size: 100%;
  height: 100%;
}
.main-warp {
  max-width: 750px;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .header {
    height: 500rem / @r;
    .header-img {
      height: 500rem / @r;
    }
  }
  .content {
    flex: 1;
    width: 100%;
    overflow: hidden;
    // overflow: auto;
    // -webkit-overflow-scrolling: touch;
    .shop-box {
      margin: 50rem / @r 0;
      img {
        width: 106rem / @r;
      }
    }
  }
  .footer {
    background: url("//storage.jd.com/1901/04nianhuojie/fixbtnbg_02.png") repeat;
    background-size: 12rem / @r 11rem / @r;
    height: 82rem / @r;
    width: 100%;
    bottom: 0;
    color: #ffdeb8;
    font-size: 34rem / @r;
    line-height: 82rem / @r;
    text-align: center;
    font-weight: bold;
    max-width: 750px;
  }
}
 
</style>

To explain, on the mobile terminal, if you use

overflow:auto;

-webkit-overflow-scrolling: touch;

On iOS, if the finger slides beyond the area of ​​the box, it is easy to cause the area to not slide when sliding again, as if the finger did not touch the box. Therefore, the BScroll plug-in is used here, and the same is true when using IScroll.

Its final effect is to add transition effect to the direct child elements of content.

Record this layout here

Note: This layout method is not compatible with iOS 9.3 and below. Flex layout should be used with caution when it needs to be compatible with lower versions of iOS.

This concludes this article about how flex layout achieves a layout with fixed top and bottom and sliding in the middle. For more relevant flex layout content with fixed top and bottom and sliding in the middle, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!