0

I had created two columns(6-span), and I want to add a component under these two columns, how can I do that?
I'm used to be an android developer. I know that the linear layout can quickly realize this demand in android.
Framework developer told me to use the flex layout to implement this requirement. However, after reading related documents, I still don't know how to implement that. sketch

HZ-VUW
  • 842
  • 9
  • 20
  • How you created the columns? Put some code, please refer to [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example), [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask), also you have enough examples on official site. – Dennis Vash Aug 19 '19 at 08:16

1 Answers1

1

You can design your layout with CSS or with antd Grid components - Row and Col, which handle the CSS for you.

const FlexBox = styled.div`
  margin: 20px;
  padding: 20px;
  border: 1px solid palevioletred;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const borderStyle = { border: '1px solid palevioletred' };
const rowStyle = { ...borderStyle, width: '100%', padding: 10 };

export default function App() {
  return (
    <FlexBox>
      <Row type="flex" justify="space-between" style={rowStyle}>
        <Col style={borderStyle}>
          <Row type="flex" justify="space-between" style={rowStyle}>
            <Col style={borderStyle}>Col-3</Col>
            <Col style={borderStyle}>Col-3</Col>
          </Row>
          <Row type="flex" justify="center">
            <Col>Target</Col>
          </Row>
        </Col>
        <Col style={borderStyle}>Col-2</Col>
      </Row>
    </FlexBox>
  );
}

enter image description here

Dennis Vash
  • 50,196
  • 9
  • 100
  • 118