console.log("CAPABLE");

align-items align-items는 교차축을 따라 아이템을 배열합니다. (justify-content는 메인 축을 따른다.) align-items: flext-start; 교차축의 시작점을 기준으로 한다. #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } #container div { width: 200px; height: 200px; text-align: center; } align-item: ..

flex-wrap flex-wrap은 메인 축이 수평일 때 새로운 행을 만들어 요소를 정렬하고 메인 축이 수직일 때 새로운 열을 만들어 요소를 정렬하는 속성이다. flex-wrap: wrap #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: column; justify-content: space-evenly; flex-wrap: wrap; } 각각 위에서 아래로 정렬되었다. justify-conten:flex-start;로 설정하면 요소들 전부가 위로 촥! 붙는다. 왜냐하면 주축이 상에서 하 방향으로 한 ..

justify-content 메인축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성이다. 디폴트는 flex-start로 입력되어있다. flex-start는 속성의 이름이다. 항상 왼쪽으로 정렬되는건 아니다. 그러나 메인 축이 왼쪽에서 오른쪽 방향이면 요소도 왼쪽에서 오른쪽정렬이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; display: flex; flex-direction: row; } #container div ..

Let's Play With Flexbox 컨테이너 개념을 포함하는 평범하고 전형적인 섹션이다. body { font-family: 'Merriweather', serif; } h1 { text-align: center; } #container { background-color: #6c757d; width: 90%; height: 500px; margin: 0 auto; border: 5px solid #6c757d; } display 속성 #container div { width: 200px; height: 200px; } 각각의 는 블록 레벨 요소로서 하나의 섹션안에 존재한다. 이 컨테이너의 diplay를 flex로 설정하면 어떻게 될까? #container { background-color: #6c..