flex
Flex 레이아웃은 아이템의 크기와 위치를 동적으로 조정할 수 있는 CSS 레이아웃 방법입니다.
Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 합니다.
Flexbox는 행 또는 열로 아이템을 배치하고, 아이템의 크기, 간격, 정렬 및 순서를 지정하는 것이 가능합니다.
Flex 레이아웃을 만들기 위해서는 부모 요소에 display: flex; 속성을 지정해주면 됩니다. 이후에는 아이템들에 대해 flex 속성을 이용하여 크기, 간격, 정렬, 순서 등을 조정할 수 있습니다.
자세히 알아 보겠습니다.
display: flex
CSS의 속성 중 하나로, Flex 레이아웃을 적용하기 위해 부모 요소에 지정하는 속성입니다.
이 속성을 지정하면 부모 요소가 Flex 컨테이너가 되어, 내부의 자식 요소들이 Flex 아이템으로 배치됩니다.
- Flexbox 레이아웃이 적용된다.
- Flex 컨테이너의 기본 방향은 수평이다. (즉, 아이템들은 행 방향으로 배치된다.)
- Flex 아이템들은 Flex 컨테이너의 너비와 높이에 맞게 크기가 자동으로 조정된다.
- Flex 아이템들은 수평 방향으로 정렬된다. (즉, 수직 방향으로 정렬하려면 align-items 속성을 사용해야 한다.)
- Flex 아이템들은 줄바꿈되지 않으며, Flex 컨테이너 내에서 자유롭게 이동할 수 있다.
Flexbox 레이아웃은 유연하고 반응형 디자인에 적합한 레이아웃 방법으로, 다양한 디바이스와 화면 크기에 대해 적응적으로 동작합니다.
flex-direction
flex-direction 속성은 Flex 컨테이너 내에서 Flex 아이템들이 배치되는 주축과 방향을 지정하는 CSS 속성입니다.
flex-direction 속성의 값에 따라 Flex 아이템들이 행 방향으로 배치될 수도 있고, 열 방향으로 배치될 수도 있습니다.
flex-direction 속성에는 다음의 값들이 있습니다.
- row : Flex 아이템들을 수평 방향으로 배치합니다. (기본값)
- row-reverse : row와 같이 수평 방향으로 배치하지만, 아이템들의 배치 순서가 반대로 됩니다.
- column : Flex 아이템들을 수직 방향으로 배치합니다.
- column-reverse : column과 같이 수직 방향으로 배치하지만, 아이템들의 배치 순서가 반대로 됩니다.
flex-direction 속성은 Flexbox 레이아웃을 조작하는 데 있어서 매우 중요한 속성입니다.
이 속성을 적절하게 활용하여 Flex 아이템들을 필요한 방향으로 배치할 수 있습니다.
flex-wrap
flex-wrap 속성은 Flex 아이템들이 Flex 컨테이너 내에서 한 줄에 배치되지 못할 때 줄 바꿈을 할지 여부를 지정하는 CSS 속성입니다.
기본값으로는 nowrap이 지정되어 있으며, 이 경우 Flex 아이템들은 한 줄에 가능한 최대한 많이 배치되고 남은 공간은 축소되어 채워집니다.
flex-wrap 속성에는 다음과 같은 값들이 있습니다.
- nowrap: Flex 아이템들이 줄 바꿈 없이 가능한 한 한 줄에 배치됩니다. (기본값)
- wrap: Flex 아이템들이 필요한 경우 다음 줄로 넘어가서 배치됩니다.
- wrap-reverse: wrap과 같이 다음 줄로 넘어가서 배치하지만, 아이템들의 배치 순서가 반대로 됩니다.
flex-wrap 속성은 반응형 웹 디자인에서 Flexbox 레이아웃을 유연하게 조절하는 데 있어서 중요한 속성 중 하나입니다.
필요에 따라 Flex 아이템들이 줄바꿈될 수 있도록 이 속성을 적절하게 활용할 수 있습니다.
justify-content
justify-content 속성은 Flex 컨테이너 내에서 Flex 아이템들을 주 축(main axis)을 따라 정렬하는 방법을 지정하는 CSS 속성입니다.
justify-content 속성에는 다음과 같은 값들이 있습니다.
- flex-start: Flex 아이템들을 주 축 시작점에 정렬합니다. (기본값)
- flex-end: Flex 아이템들을 주 축 끝점에 정렬합니다.
- center: Flex 아이템들을 주 축 중앙에 정렬합니다.
- space-between: 첫 번째 Flex 아이템을 주 축 시작점에, 마지막 Flex 아이템을 주 축 끝점에 배치하고, 나머지 아이템들을 균등하게 주 축에 분배합니다.
- space-around: Flex 아이템들을 균등하게 주 축에 분배합니다. 아이템들의 양쪽에 동일한 간격을 만들어 주기 때문에 주 축 시작점과 끝점에 있는 아이템들은 그 간격의 절반만큼만 움직입니다.
- space-evenly: Flex 아이템들을 균등하게 주 축에 분배합니다. 모든 아이템들 사이의 간격이 동일합니다.
justify-content 속성은 Flexbox 레이아웃을 조작하는 데 있어서 매우 중요한 속성입니다. 이 속성을 적절하게 활용하여 Flex 아이템들을 필요한 위치에 배치할 수 있습니다.
align-items
align-items 속성은 Flex 컨테이너 내에서 Flex 아이템들을 교차 축(cross axis)을 따라 정렬하는 방법을 지정하는 CSS 속성입니다.
align-items 속성에는 다음과 같은 값들이 있습니다.
- stretch: Flex 아이템들을 교차 축을 따라 늘립니다. (기본값)
- flex-start: Flex 아이템들을 교차 축 시작점에 정렬합니다.
- flex-end: Flex 아이템들을 교차 축 끝점에 정렬합니다.
- center: Flex 아이템들을 교차 축 중앙에 정렬합니다.
- baseline: Flex 아이템들을 텍스트의 기준선에 맞추어 정렬합니다.
align-items 속성은 Flexbox 레이아웃을 조작하는 데 있어서 매우 중요한 속성입니다. 이 속성을 적절하게 활용하여 Flex 아이템들을 필요한 위치에 배치할 수 있습니다.
flex에 대해 알아봤는데 꽤 써봤다고 생각했지만 모르는것들 투성이였습니다..
더 써봐야 알거같습니다!