Align Checkboxes using Flex-CodePudding

I am using Flex for displaying checkboxes. I am able to achieve the requirements for the large and small resolutions but for the medium resolution, the checkboxes doesn't seem to be working as expected.

My Code is:

Source code:

import "./styles.css";
import { Row, Col, Input } from "reactstrap";
import Flex from "./Flex";

export default function App() {
  return (
    <Row className="py-3">
      <Col className="col-3 mx-1">
        <Row>
          <Col>
            <b>FIFA 2022 QUALIFIERS</b>
          </Col>
        </Row>
      </Col>

      <Col className="col-2">
        <Row>
          <Col>
            <span>&nbsp;&nbsp;All&nbsp;&nbsp;</span>
            <Input type="checkbox" />
          </Col>
        </Row>
      </Col>
      <Col>
        <Row className="d-flex">
          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;ARG</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;SWI</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;FRA</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;POR</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;MOR</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;JAP</span>
          </Flex>

          <Flex>
            <Input type="checkbox" />
            <span>&nbsp;&nbsp;SOU</span>
          </Flex>
        </Row>
      </Col>
    </Row>
  );
}

Thank you for your help!

CodePudding user response：

In your Flex.tsx file, add flex-grow-0 class. For more information check https://getbootstrap.com/docs/5.0/utilities/flex/#grow-and-shrink and https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  <Col className="d-flex gap-1 flex-grow-0" {...props}>
    {children}
  </Col>

Btw, in the screenshot you provided, FRA and SOU are slightly misaligned for medium resolution. If you also want to fix that, give width to the Col element in the Flex component.