💡 Flex box

Flex box

    - 요소들을 정렬하기 가장 편한 방법

    - 정렬을 하기위한 요소의 부모요소에게 선언을 합니다.

.flexbox {
	display : flex;
	/* flex | inline-flex */
}

flex-direction

    - 가로, 세로 정렬 방향을 정하는 property

    - main-axis와 cross-axis의 방향이 따라 가게됩니다.

    - flex-direction : row -> 가로 방향으로 정렬

    - flex-direction : row-reverse -> 가로 반대 방향으로 정렬

    - flex-direction : column -> 세로 방향으로 정렬

    - flex-direction : column-reverse -> 세로 반대 방향으로 정렬

.flexbox {
	display : flex;
	flex-direction : column; 
	/* default flex-direction : row */
}

https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction

flex-direction

flex-wrap

    - flex-wrap : warp; -> 자식 요소 사이즈가 부모 요소 사이즈보다 크면 자식사이즈를 유지하며 한줄로 정렬이 아닌 내려가게 됩니다.

    - flex-wrap: nowarp; -> 자식 요소 사이즈가 부모 요소 사이즈보다 커도 한줄 정렬이 되고 부모 요소 사이즈안에 자식 요소들을 넣기 위해 자식요소 사이즈가 줄어듭니다.

.flexbox {
	display : flex;
	flex-direction : column; 
	flex-wrap : warp;
	/* default flex-wrap : nowarp*/
}

---

.test-container {
    background-color: #f2f2f2;
    margin: 0 auto;
    width: 400px;
    display: flex;
}

.test-container div {
    text-align: center;
    margin: 20px;
    width: 150px;
    height: 150px;
    line-height: 150px;
    font-weight: bold;
    color: white;
}

.test-container__red {
    background-color: red;
}

.test-container__green {
    background-color: green;
}

.test-container__blue {
    background-color: blue;
}

기본값인 flex-wrap : nowarp; 경우 요소들의 사이즈가 작아진다.

.test-container {
    background-color: #f2f2f2;
    margin: 0 auto;
    width: 400px;
    display: flex;
    flex-wrap: wrap;
}

.test-container div {
    text-align: center;
    margin: 20px;
    width: 150px;
    height: 150px;
    line-height: 150px;
    font-weight: bold;
    color: white;
}

.test-container__red {
    background-color: red;
}

.test-container__green {
    background-color: green;
}

.test-container__blue {
    background-color: blue;
}

flex-wrap : wrap; 경우 부모 요소의 사이즈보다 자식요소돌의 사이즈가 클 경우 

 

justify-content

    - main-axis의 방향에서 정렬을 하기위한 property

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

justify-content

align-items

    - cross-axis의 방향에서 정렬을 하기위한 property

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items

align-content

    - flex-wrap : wrap; 의 경우에만 사용이 가능하다.

    - 전체 큰흐름의 cross-axis축을 기준으로 정렬하게 된다.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

align-content

 

*

https://d2.naver.com/helloworld/8540176