flex-wrap

1. flex-wrap 속성이란?flex-wrap 속성이란 Flex 컨테이너 내의 아이템들이 주 축을 따라 한 줄에 배치될지, 아니면 여러 줄에 걸쳐 배치될지를 결정한다. flex-wrap 속성에는 아래와 같은 값을 사용할 수 있다.nowrap : 기본값으로, 모든 아이템을 한 줄에 배치한다. 아이템들이 컨테이너의 너비를 넘어서도 한 줄에 계속 배치된다.wrap : 아이템들을 여러 줄에 걸쳐 배치한다. 주 축을 따라 공간이 부족하면 자동으로 줄 바꿈이 일어난다.wrap-reverse : 아이템들을 여러 줄에 걸쳐 반대 방향으로 배치한다. wrap과 동일하게 줄 바꿈이 일어나지만, 아이템들이 반대 방향으로 쌓인다.2. 시나리오 코드 flex-wrap:nowrap(기본값) 아이템1 아이템2 아이템3 ..

• format_list_bulleted HTML CSS/CSS flexbox
• · 2024. 7. 2.
• textsms

flex-direction 속성이란?

1. 주 축(main axis)과 교차 축(cross axis) FlexBox의 두 개의 축flexbox 레이아웃의 정렬을 이해하는데 가장 중요한 역할을 하게 된다. 주축( main axis)의 방향과 교차축 (cross axis )의 방향을 결정하는 flex-direction 이라는 속성이 있다. flex-direction의 기본값은 row이다. 주축 방향(main axis) : Flex container에 선언된 flex-direction의 값에 따라 자식 요소인 flex item이 나열되는 방향이다. flex-direction:row 인 경우는 주축이 수평이 되고 flex-direction:column인 경우는 주축이 수직 방향이 된다.교차축 방향(cross axis ) : Flex containe..

• format_list_bulleted HTML CSS/CSS flexbox
• · 2024. 7. 1.
• textsms

Flexbox 란?

1. Flexbox란 무엇인가?웹 페이지의 요소들을 유연하게 배치하려면 먼저 CSS 레이아웃 방식에 대한 이해가 필요하다.그 중에서 먼저 HTML 박스 모델과 블록 및 인라인 요소 또는 인라인블록 속성의 개념을 이해하는 것이 선행되어야 웹 페이지 레이아웃을 자유롭게 다룰 수 있다.박스 모델이란? 콘텐츠(Content) : 텍스트나 이미지 등 실제 내용이 들어가는 부분이다. 패딩(Padding) : 콘텐츠와 테두리 사이의 여백이다. 패딩은 콘텐츠 주위에 투명한 공간을 추가한다.테두리(Border) : 패딩과 마진 사이의 영역으로, 요소의 경계를 나타낸다. 테두리는 가시적일 수도 있고 투명할 수도 있다. 마진(Margin) : 요소와 다른 요소 사이의 외부 여백이다. 마진은 요소들 사이에 공간을 추가한다.블..

• format_list_bulleted HTML CSS/CSS flexbox
• · 2024. 7. 1.
• textsms