css - 使用水平滚动适合 div 中的所有项目

Question

我想将所有具有原始尺寸的物品放入固定宽度的容器中。我不想妥协孩子的宽度以适合容器。我想让水平滚动到位。

我已经尝试使用 flexbox 将它们全部内联，但我不确定如何添加水平滚动条。

我想用滚动条一次显示 5 个块。

这就是它目前的样子。

import styled from 'styled-components';

const Block = styled.div`
    height: 300px;
    width: 200px;
    border: 2px solid black;
`;

const Container = styled.div`
    display: flex;
overflow-x: scroll;
`;

const Planner = () => (
    <Container>
        <Block>Block 1</Block>
        <Block>Block 2</Block>
        <Block>Block 3</Block>
        <Block>Block 4</Block>
        <Block>Block 5</Block>
        <Block>Block 6</Block>
        <Block>Block 7</Block>
        <Block>Block 8</Block>
        <Block>Block 9</Block>
        <Block>Block 10</Block>
        <Block>Block 11</Block>
    </Container>
);

export default Planner;

标签： cssreactjs

Answer 1

这里的关键方面是删除项目的宽度，而是flex像这样设置属性flex: 0 0 200px：这将确保项目既不会增长，第一个 0，也不会缩小，第二个 0，并且宽度为 200px。

然后确保您的容器隐藏了溢出的内容。

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";

const Block = styled.div`
  height: 300px;
  flex: 0 0 200px;
  border: 2px solid black;
`;

const Container = styled.div`
  display: flex;
  overflow-x: auto;
`;

const Planner = () => (
  <Container>
    <Block>Block 1</Block>
    <Block>Block 2</Block>
    <Block>Block 3</Block>
    <Block>Block 4</Block>
    <Block>Block 5</Block>
    <Block>Block 6</Block>
    <Block>Block 7</Block>
    <Block>Block 8</Block>
    <Block>Block 9</Block>
    <Block>Block 10</Block>
    <Block>Block 11</Block>
  </Container>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<Planner />, rootElement);