Flexible Box 플렉서블 박스

이세라·2024년 9월 20일

1. 플렉서블 박스

  • 가변적인(자주 변하는 것) 박스를 손쉽게 사용할 수 있도록 함.
  • 배치에 주로 사용

2. 플렉서블 박스 = 부모 박스

  • 가변적인 박스로 작동
  • 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성 적용해야 함.

3. 플렉서블 박스의 자식 박스 = 플렉스 아이템

    #wrap{
        width: 100%;
        /* overflow: hidden; */
        background-color: blanchedalmond;
        /* 플렉서블 박스 적용 - 부모에 적용 */
        display: flex; /* 플렉서블 박스를 적용 */
        flex-direction: row; /* 배치 - 행, flex-direction: column; - 열 */
        justify-content: space-between; /* 자식요소인 아이템을 배치하는 방법 */
        flex-wrap: wrap; /* 자동 줄 바꿈 */
    }
profile
개린이입니다...

0개의 댓글