[CSS] flex-direction

flex-direction flexbox 레이아웃에서 flex아이템들이 배치되는 주축(main axis)의 방향을 설정하는 속성입니다. row 기본적인 flex container의 주축이 가로방향입니다. 가로로 왼쪽에서 오른쪽으로 배치됩니다. row-reverse main-axis는 가로 방향이지만, flex 아이템은 오른쪽에서 왼쪽으로 배치됩니다. column main-axis를 세로 방향으로 바꿉니다. flex 아이템은 위에서 아래로 배치됩니다. column-reverse 세로 방향으로 아래에서 위로 배치됩니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 5.
• textsms

[CSS] flex-basis

flex-basis Flexbox 레이아웃에서 요소의 초기 크기를 정의하는 속성입니다. 이 속성은 'flex' 컨테이너 내에서 요소의 기본 크기를 지정할 때 사용됩니다. 길이 단위를 px, % 또는 'auto'로 지정할 수 있습니다. 길이 단위를 사용하면 요소 크기를 특정 값으로 지정할 수 있으며, 'auto'를 사용하면 요소의 크기가 내용에 따라 자동으로 결정됩니다. 부모 요소의 가로 축에서 추가적인 공간이 있다면, 'flex-grow'와 'flex-shrink' 속성에 따라 크기가 조절됩니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 4.
• textsms

[CSS] flex-shrink

flex-shrink 레이아웃에서 요소의 크기가 축소될 때 얼마나 줄어들지를 결정하는 속성 요소의 크기가 레이아웃의 크기보다 커서 레이아웃을 넘어설 때, flex-shrink를 사용하면 주어진 비율에 맞게 크기가 조절됩니다. 위의 그림에서는 요소의 크기가 레이아웃의 범위를 벗어납니다. flex-shrink: 1; 을 모든 요소에 적용하면 같은 비율로 레이아웃 범위에 맞는 크기로 축소됩니다. 각 요소들의 크기를 조정하지 일일이 조정하지 않아도 간편하게 맞출 수 있습니다. flex-shrink의 기본 값은 0이며, 숫자가 커질 수록 줄어드는 크기가 더 큽니다. 만약 비율을 다르게 하고자 한다면 각각 요소에 따로 flex-shrink를 사용해야 합니다.

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 3.
• textsms

[CSS] Flex & flex-grow

Flex CSS의 'Flex'는 유연한 박스 모델을 생성하기 위해 사용되는 레이아웃 속성입니다. HTML의 여려 박스들을 쉽게 정리하기 위해 사용합니다. class container 안에 있는 모든 박스에 flex를 적용하는 코드입니다. flex-grow flexbox 레이아웃에서 유연한 크기 조절을 위해 사용되는 속성 중 하나 입니다. 이 속성은 자식 요소에 적용되며, 남은 공간을 얼마나 차지할지를 결정합니다. flex-grow 속성값은 양의 정수입니다. 값이 클수록 해당 요소가 남은 공간을 많이 차지하게 됩니다. 'flex-grow: 0;'이면 해당 요소는 남은 공간을 차지하지 않고 초기의 크기를 유지합니다. flex-grow를 사용한 예시 입니다. flex-grow 속성 값이 1이기 때문에 사용 가..

• format_list_bulleted 코딩/HTML,CSS
• · 2023. 6. 2.
• textsms