CSS/속성 - flex 15

Flex Containers 속성 - flex-wrap

flex-wrap Items의 여러 줄 묶음(줄 바꿈)을 설정한다. 값 의미 기본값 nowrap 모든 Items를 여러 줄로 묶지 않음(한 줄에 표시) nowrap wrap Items를 여러 줄로 묶음 wrap-reverse Items를 wrap의 역 방향으로 여러 줄 묶음 flex-wrap: 여러줄묶음; 기본적으로 Items는 한 줄에서만 표시되고 줄 바꿈 되지 않는다. (요소가 넘치더라도 무조건 한줄이다.) 이는 지정된 크기(주 축에 따라 width나 height)를 무시하고 한 줄 안에서만 가변한다. Items를 줄 바꿈 하려면 값으로 wrap을 사용해야 한다. .container{ border: 4px solid; display: flex; flex-wrap: wrap; } .container ...

CSS/속성 - flex 2021.01.13

Flex 주축과 교차축, 시작점과 끝점

주 축(main-axis)과 교차 축(cross-axis) 위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같다. 값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 된다. 반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 된다. 즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라진다. 시작점(flex-start)과 끝점(flex-end) 시작점(flex-start)과 끝점(flex-end)이라는 개념도 있다. 이는 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 역시 방향에 따라 시작점과 끝점이 달라진다. 뒤에서 언급할 속성 중 값으로 flex-start와 ..

CSS/속성 - flex 2021.01.13

Flex Containers 속성 - flex-flow, flex-direction

flex-flow 이 속성은 단축 속성으로 Flex Items의 주 축(main-axis)을 설정하고 Items의 여러 줄 묶음(줄 바꿈)도 설정한다. flex-flow: 주축 여러줄묶음; .flex-container { flex-flow: row-reverse wrap; } 값 의미 기본값 flex-direction items의 수 축(main-axis)을 설정 row flex-wrap items의 여러 줄 묶음(줄 바꿈) 설정 nowrap flex-direction Items의 주 축(main-axis)을 설정합니다. 값 의미 기본값 row Items를 수평축(왼쪽에서 오른쪽으로)으로 표시 row row-reverse Items를 row의 반대 축으로 표시 column Items를 수직축(위에서 아래..

CSS/속성 - flex 2021.01.13

Flex Containers 속성 - display

Flex Container를 위한 속성들은 다음과 같다. 주 축(main-axis)과 교차 축(cross-axis)의 개념은 뒤에서 살펴본다. 속성 의미 display Flex Container를 정의 flex-flow flex-direction와 flex-wrap의 단축 속성 flex-direction Flex Items의 주 축(main-axis)을 설정 flex-wrap Flex Items의 여러 줄 묶음(줄 바꿈)설정 justify-content 주 축(main-axis)의 정렬 방법을 설정 align-content 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) align-items 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) display display..

CSS/속성 - flex 2021.01.13

Flex 개요

flex는 수직이나 수평 정렬에 관련된 CSS 속성이라고 보면 된다. .container{ border: 2px solid red; } .container .items{ width: 100px; height: 100px; border: 2px solid; border-radius: 10px; display: inline-block; } display: inline으로 설정하면 inline요소로 바뀌기 때문에 width와 height값이 적용되지 않는 모습을 볼 수 있기 때문에, display: inline-block으로 해야한다. 또한 문제점은 items는 inline요소가 되었기 때문에 화면에 출력된 모습을 보면 margin값을 넣지 않았는데도 서로 한칸씩 떨어져있는 모습도 볼 수 있다. 이러한걸 방지..

CSS/속성 - flex 2021.01.13