css - 使用水平滚动将所有元素放入 div 中

Question

我想将所有元素以其原始大小放入一个固定宽度的容器中。我不想牺牲 child 的宽度以适应容器。我想要水平滚动条。

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

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

这就是它现在的样子。

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;

Answer 1

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

然后确保您的容器 overflow hidden 的内容。

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