cross-axis2 Flexbox - 1️⃣ <column, row에 따른 Main Axis, Cross Axis와 align-self > Flexbox에서 하위 요소를 움직이고 싶을 때 container를 만들어야한다. container { display: flex; /* inline-block과 같은 결과를 얻는다 */ } 이 container는 하위요소들과 붙어있는 부모가 되어야한다. 그 부모를 container로 지정하는게 첫번째이다. 아래와 같은 html 파일이 있다고 가정하고 flexbox로 어떻게 box를 조작하는지 알아보겠다. ... 1 2 3 ... 우선, box들의 위치를 바꾸고 싶으면 해당 box들을 감싸주는 container 개념의 태그가 필요하다. container에 display: flex; 를 해주었다. 한 행에 box들이 정렬되게 된다. flexbox는 row와 column 두가지 방향으로 설정할 수 있다. 이때.. 2020. 5. 15. flex의 display와 flex-direction에 대해 (main-axis, cross-axis란?) 1. flex Flex Container, Items 2가지의 개념으로 나뉜다. Container는 Items을 감싸는 부모요소이다. Container와 Items는 프로퍼티 또한 구분되어 있다. Container display flex-flow (flex-direction, flex-wrap) justify-content Items order flex align-self 2. 초기 설정 1 2 3 flex-container라는 class명을 가진 div와 그 자식요소로서의 3가지 div를 만들었다. 3. display div는 block 요소이기때문에 수직으로 정렬된다. 이를 수평정렬하려면 자식요소를 inline-block으로 지정하거나, float 프로퍼티를 지정해야했다. 이때 각 자식 요소의 너비를.. 2020. 2. 16. 이전 1 다음 LIST
