css flex使用--分栏效果

最新推荐文章于 2024-05-31 14:50:36 发布

原创最新推荐文章于 2024-05-31 14:50:36 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

9 篇文章

订阅专栏

<template>
    <div class="goods">
      <div class="menu-wrapper"></div>
      <div class="foods-wrapper"></div>
    </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
  .goods {
    display flex
    position absolute
    top: 178px
    bottom 46px
    overflow hidden
    width: 100%
  }
  .goods .menu-wrapper {
    flex:0 0 80px
    width: 80px
    background-color lightgray
  }
  .goods .foods-wrapper {
    flex:1;
    background-color red
  }
</style>