페이지에 대한 요소를 처음 만들면 기본적으로 스택으로 나타납니다. 요소의 상자가 페이지의 전체 너비를 차지하는 것을 볼 수 있습니다. 원하는 레이아웃을 얻기 위해 CSS 속성을 조정하거나 위치 속성으로 요소를 배치할 수 있지만 이는 지루한 작업이 될 수 있습니다. 플렉스 박스는 행이나 열에 요소를 배치하는 데 도움이 됩니다. W3schools는 "Flexible Box Layout Module을 사용하면 부동 또는 배치 없이 유연한 반응형 레이아웃 구조를 보다 쉽게 ​​디자인할 수 있습니다."라고 말합니다. 이 블로그에서는 UI 레이아웃을 만드는 데 도움이 되는 간단한 Flex 속성을 시연합니다.

플렉스 컨테이너

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    display: flex;
}

flex로 설정된 display 속성은 컨테이너를 flex 컨테이너로 식별하므로 다른 속성을 활용하여 자식 요소가 공간을 차지하는 방식을 조작할 수 있습니다. 컨테이너 요소에 표시 속성을 설정하기 전에. 요소가 서로 위에 쌓이는 것을 확인하십시오. 디스플레이를 flex로 설정하면 컨테이너에 정렬되어 나타납니다.

Flexbox의 축

Flexbox 속성은 두 개의 축을 기반으로 작동합니다. 플렉스 컨테이너의 자식이 배치되는 기본 축입니다. 기본적으로 주축은 수평이지만 이 블로그에서 보여줄 flex-direction 속성의 설정에 따라 수직이 될 수도 있습니다. 교차축은 주축에 수직입니다. 주축이 수직이면 수평이고, 수평이면 수직일 수 있습니다.

플렉스 컨테이너 CSS 속성

#container{
    background-color: green;
    width: 100%;
    height: 100px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row-reverse
}

Flex-direction은 기본적으로 행으로 설정됩니다. 요소를 왼쪽에서 오른쪽으로 정렬합니다. 행 반전으로 설정하면 위와 같이 반대가 됩니다.

#container{
    background-color: green;
    width: 100%;
    height: 250px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column-reverse
}

flex-direction은 처음에서 마지막으로, 위에서 아래로 요소를 배치하는 열로 설정할 수 있습니다. column-reverse 는 위와 같이 반대 작업을 수행합니다.

높이 속성이 요소가 떨어지지 않도록 페이지에 배치할 요소 수를 수용하는지 확인하십시오. 이것이 내가 높이를 250px로 변경한 이유입니다.

#container{
    background-color: green;
    width: 50%;
    height: 60px;
    margin: auto;
    text-align: center;
    display: flex;
    justify-content: space-evenly
}

justify-content 속성은 기본적으로 flex-start로 설정되지만 여기서는 space-evenly를 사용합니다. Justify-content는 컨테이너의 요소 사이와 주변에 공간을 제공하는 데 사용할 수 있습니다. justify-content에 설정할 수 있는 많은 값이 있습니다. 자유롭게 탐험해보세요!

플렉스 하위 CSS 속성

#three {
flex-grow: 4
}

Flex 컨테이너의 자식에 대한 속성을 설정할 수도 있습니다. flex-grow 또는 flex-shrink를 설정하여 요소의 크기를 변경할 수 있습니다. 음수는 사용할 수 없습니다. 자식 요소에 사용할 수 있는 더 많은 속성이 있습니다. 자세한 내용은 https://yoksel.github.io/flex-cheatsheet/을 확인하십시오!

결론

Flex box는 모든 화면 크기에 반응하는 페이지를 만들 수 있습니다. 연구에 따르면 작업을 완료하기 위해 그리드 시스템과 가장 잘 어울린다고 읽었습니다. 컨테이너 css 속성 표시를 flex로 설정합니다. 그런 다음 다른 속성을 사용하여 하위 요소를 정렬하거나 간격을 둘 수 있습니다. 하위 요소의 순서를 재정렬하고, 늘리고, 축소하고, 기타 여러 기술을 사용할 수도 있습니다. Flex Box에 관심이 있다면 성장할 여지가 항상 더 많기 때문에 조금 더 깊이 파헤쳐 보세요! 읽어 주셔서 감사합니다.