Как сделать элементы в flex более отзывчивыми? - PullRequest
Новая
       37

Как сделать элементы в flex более отзывчивыми?

0 голосов
/ 21 марта 2020

У меня есть макет заголовка, и я поместил элементы в элемент flex Row & Col. В настоящее время отзывчивость Col не идеальна, но я пытаюсь понять больше, как сделать элементы внутри Col более отзывчивыми внутри. Правильный ли способ использовать div?

Я хочу, чтобы он мог расти и всегда располагаться внутри Col, однако, когда я уменьшаю его до другого размера экрана, он рендерит за пределами

Webview https://tp2d7.csb.app/

Edit Custom trigger - Ant Design Demo

        <Row>
          <Col
            xs={1}
            sm={2}
            md={3}
            lg={4}
            style={{ backgroundColor: "red" }}
          >
            <Avatar />
          </Col>
          <Col
            xs={4}
            sm={8}
            md={10}
            lg={12}
            style={{ backgroundColor: "blue" }}
          >
            <Avatar />
          </Col>
          <Col
            xs={2}
            sm={4}
            md={6}
            lg={8}
            style={{ backgroundColor: "green" }}
          >
            <div
              style={{
                justifyContent: "flex-end",
                display: "flex"
              }}
            >
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
              <div style={{ padding: "0 6px" }}>
                <Avatar />{" "}
              </div>
            </div>
          </Col>
        </Row>
      </Header>

1 Ответ

0 голосов
/ 21 марта 2020

Вам необходимо настроить размер компонента Avatar, возможно, определите его с помощью em или rem единиц. Также объявление о том, что div как flexbox не многого добивается, если только вы не хотите, чтобы он был в состоянии обернуть себя. Вы также определили меньшую ширину столбца для размера xs и больше для размера lg. Это не имеет особого смысла для меня. Попробуйте переключить его (xs = {4} lg={2}).

Добавьте это свойство с другими определенными стилями флекс и посмотрите, нужен ли эффект flexWrap: 'wrap'

...