水平滚动反应照片库

Question

我使用 reakt 照片库库；我的组件获取图像数组作为道具，并将其转换为具有字段 {src、width、height} 的对象数组。一切正常，但问题是我有一个特定的块高度，画廊应该插入其中。块的高度明显小于画廊整个块的高度，所以我假设图片会水平滚动，并且它们仍然继续垂直滚动，我该如何进行水平滚动？

import React from 'react';
import Gallerys from 'react-photo-gallery';

const Content = styled.div`
  height: 700px;
  width: auto;
  overflow-x: scroll;
  img {
    border-radius:10px;
}
`;

class Gallery extends React.Component {

 render() {
   return (
     <Content>
       <Gallerys direction={'row'} margin={40} photos={images} />
     </Content>
   );
  }
 }

 export default Gallery;

Answer 1

请在这里查看答案https://codesandbox.io/embed/lively-sun-zqe7g

注意：在你的 style.css/style.scss 中使用它

//use in css
.react-photo-gallery--gallery div {
  flex-flow: nowrap !important;
}


//use in sass/scss
.react-photo-gallery--gallery{
  div{
    flex-flow: nowrap !important;
  }
}