CSS) flexbox (display, flex-direction, justify-contents, align-items, flex-wrap, align-content)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

부모 요소 flex-container

- display : flex / inline-flex

- flex-direction 방향 : row(기본값) / column

- justify-contents 메인축정렬 (flex-direction 선택값)

- align-items 크로스축정렬 (flex-direction 선택값 교차축)

 

- flex-wrap 줄바꿈여부 : nowrap(기본값) / wrap

- align-content 여러줄 flex-container인 경우 크로스축 설정

 

자식 요소 flex-item

---

HTML 코드

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

 

CSS 코드

display

flex-direction: row

<style>
    ul.test {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        list-style-type: none;
        border: 3px solid tomato;
        height: 70vh;
        padding: 0;
    }

    ul.test li {
        width: 100px;
        height: 100px;
        background-color: orangered;
        margin: 8px;
    }
</style>

 

flex-direction: column

li에 대해서 width, height을 100px로 지정하였지만, 한정된 공간 안에 li들을 표현하기 위해 지정한 width, height가 무시된 것을 확인할 수 있습니다.

---

HTML 코드

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <!-- <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li> -->
</ul>

 

CSS 코드

 

justify-content: center

- 메인 축 정렬

<style>
    ul.test {
        display: flex;
        flex-direction: row;
        justify-content: center; /* flex-start, center, flex-end, space-between, space-around, space-evenly */
        list-style-type: none;
        border: 3px solid tomato;
        height: 70vh;
        padding: 0;
    }

    ul.test li {
        width: 100px;
        height: 100px;
        background-color: orangered;
        margin: 8px;
    }
</style>

 

justify-content: flex-start

 

justify-content: flex-end

 

justify-content: space-between

영역을 꽉 채워서 일정한 간격으로 배치해줍니다.

 

justify-content: space-around

요소 주위의 공간(여백)을 동일하게 배치해줍니다.

 

justify-content: space-evenly

(V) 여백 공간을 동일하게 하여 배치해줍니다.

 

---

 

align-items: center

- 크로스축 정렬

align-items: center; /* flex-start, center, flex-end, stretch, baseline */

 

align-items: flex-start

 

align-items: flex-end

 

align-items: stretch

이 때, <li>의 height 속성을 제거해줘야 위처럼 늘릴 수 있습니다.

 

align-items: baseline

실제 내용(텍스트)의 밑줄에 맞춰 크기를 조정합니다.

 

---

HTML 코드

<ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

 

CSS 코드

 

flex-wrap: nowrap(기본값)

- 줄바꿈 여부

ul.test {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    flex-wrap: nowrap;

    list-style-type: none;
    border: 3px solid tomato;
    height: 70vh;
    padding: 0;
}

간격이 줄어들면 줄이 바뀌지 않고 요소의 크기가 조정됩니다.

 

flex-wrap: wrap

요소가 여러 개 일 때 줄 바꿈이 일어난 것을 확인할 수 있습니다.

 

 

align-content: center

- 메인 축이 두 개 이상일 때 배치

align-content: center; /* flex-start, center, flex-end, space-between, space-arcound, stretch */

 

align-content: flex-start

 

align-content: flex-end

 

align-content: space-around

 

align-content: space-between

 

align-content: stretch

<li> 태그에 대한 height 속성 제거 및 align-items에 대한 속성이 제거 되어야 stretch 설정이 올바르게 작동합니다.

 

※ flexbox 관련 참고 포스팅

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자