Display flex, Justify Content [React, TypeScript, CSS]

 < 내용 > 

• display: flex를 사용해서 도형을 가로로 정렬할 수 있다.
• justify-content를 사용해서 도형을 정렬할 수 있다.

 < 목차 > 

1. display: flex
2. justify-content
3. 반응형
4. 기타 코드

---

 1. Display: Flex 

• 파란색 테두리의 초록색 큰 직사각형은 display: flex가 적용되지 않았다.
• 따라서 도형은 세로로 정렬된다.
• 하지만 display: flex를 적용하면 첫째 줄의 작은 상자들 처럼 가로로 정렬된다.

---

 2. Justify-Content 

• justify-content: center를 적용하면 가운데
• justify-content: flex-end를 적용하면 오른쪽으로 정렬한다. (그냥 end와 right도 비슷한 기능을 하는 것 같다.)

• 위의 사진을 참고해서 만들면 된다.

---

 3. 반응형 

• display: flex와 justify-content를 적절히 사용하면 다음과 같은 반응형도 만들 수 있다.
• space기능의 경우 도형의 크기가 바뀜에 따라 공간을 계산해서 자동으로 위치를 조정한다.

반응형

---

 4. 기타 코드 

• 티스토리의 typeScript 코드도 올릴 수 있게 되어있는데 아직 미흡해 보인다. 색이 다르게 나오더라.

import classes from "./PracticeCss.module.css";

const PracticeCss: React.FC = () => {
  return (
    <div className={classes.container}>
      <div className={classes.textBox}>
        <h1 className={classes.text}>display: flex</h1>
      </div>
      <div className={classes.largeBox}>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
      <div className={classes.textBox}>
        <h1 className={classes.text}>justifyContent: center</h1>
      </div>
      <div className={classes.largeBox} style={{ justifyContent: "center" }}>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
      <div className={classes.textBox}>
        <h1 className={classes.text}>justifyContent: flex-end</h1>
      </div>
      <div className={classes.largeBox} style={{ justifyContent: "flex-end" }}>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
      <div className={classes.textBox}>
        <h1 className={classes.text}>justifyContent: space-around</h1>
      </div>
      <div
        className={classes.largeBox}
        style={{ justifyContent: "space-around" }}
      >
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
      <div className={classes.textBox}>
        <h1 className={classes.text}>justifyContent: space-between</h1>
      </div>
      <div
        className={classes.largeBox}
        style={{ justifyContent: "space-between" }}
      >
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
      <div className={classes.textBox}>
        <h1 className={classes.text}>justifyContent: space-evenly</h1>
      </div>
      <div
        className={classes.largeBox}
        style={{ justifyContent: "space-evenly" }}
      >
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
        <div className={classes.smallBox}></div>
      </div>
    </div>
  );
};

export default PracticeCss;

• 아래가 css

.container {
  background-color: dimgray;
  width: 100%;
  min-width: 375px;
}
.largeBox {
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  border: 5px solid blue;
  background-color: green;

  display: flex;
}
.smallBox {
  height: 100%;
  aspect-ratio: 1;
  background-color: beige;
  box-sizing: border-box;
  border: 2px solid black;
}
.textBox {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0px 40px;
}
.text {
  margin: 0px;
  color: white;
  font-weight: bold;
  font-size: 40px;
}