Flex水平滑动布局

使用flex水平布局

     

          
     
 

.two-row{
        margin-top: 0.1rem;
        width: calc(100% - 0.2rem);
        height: auto;
        display:flex;
         flex-wrap:nowrap;
         overflow-x:scroll;
         flex-direction: row;
          .item{
               margin-left: 0.2rem;
               margin-top: 0rem;
               margin-bottom: 0.1rem;
               width: 25vw;
               height: 30vw;
           }
 }

此时，会发现div并没有水平滑动，而是修改了item的宽度（将two-row的宽度均分给了item）。

解决方法

在item的内部设置宽度，撑开被均分的div。

此时，将item变为item-super，内部添加item元素

 

            

               

                 
               
            
  
        

.two-row{
           margin-top: 0.1rem;
           width: calc(100% - 0.2rem);
           height: auto;
           display:flex;
           flex-wrap:nowrap;
           overflow-x:scroll;
           flex-direction: row;
           .item-super{
               margin-left: 0.2rem;
               margin-top: 0rem;
               margin-bottom: 0.1rem;
               width: 25vw;
               height: 30vw;
                .item{
                    width: 25vw;
                    height: 30vw;
                }
           }
        }