Flex

컨텐츠를 1차원 형태로 배치할 수 있게끔 도와주는 컴포넌트입니다.

---

1

2

3

4

5

6

import React from "react";
import { Flex } from "@solo5star/layout-component";

const App = () => {
  return (
    <Flex direction="row" align="center" style={{ height: '200px' }}>
      <div style={{ width: '50px', height: '100px', background: 'red' }}>1</div>
      <div style={{ width: '50px', height: '200px', background: 'orange' }}>2</div>
      <div style={{ width: '50px', height: '50px', background: 'yellow' }}>3</div>
      <div style={{ width: '50px', height: '150px', background: 'green' }}>4</div>
      <div style={{ width: '50px', height: '200px', background: 'blue' }}>5</div>
      <div style={{ width: '50px', height: '50px', background: 'purple' }}>6</div>
    </Flex>
  );
};

export default App;

• direction 속성을 설정하여 배치 방향을 설정할 수 있습니다.
• align 속성을 사용하여 메인 축(main axis) 정렬을 설정할 수 있습니다.
• justify 속성을 사용하면 교차 축(cross axis) 정렬을 설정할 수 있습니다.
• wrap 속성을 사용하여 자식 요소들이 사용할 수 있는 공간을 넘었을 때 줄을 바꿀지 정할 수 있습니다.