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;
  }
}

Answer 2

我找到了这篇文章，它似乎和您要尝试的目的相同。

how-to-create-horizontally-scrollable-sections-with-flexbox

希望对您有帮助。

水平滚动反应图库

2 个答案: