flex 코딩 정렬 flex-direction, justify-content, flex-wrap

 

기본html

	<div class="container">
        <div class="item">
            <h3>1번째 item</h3>
            <img src="../img/aside.svg" alt="aside">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, dicta similique? Corrupti placeat culpa, modi assumenda itaque, voluptate sequi, vero rerum dicta alias voluptates vitae quod veniam obcaecati facere. Earum.</p>
        </div>
        <div class="item">
            <h3>2번째 item</h3>
            <img src="../img/calltrans.svg" alt="calltrans">
            <p>vero rerum dicta alias voluptates vitae quod veniam obcaecati facere. Earum.</p>
        </div>
        <div class="item">
            <h3>3번째 item</h3>
            <img src="../img/hold.svg" alt="hold">
            <p>Harum, dicta similique? Corrupti placeat culpa, modi assumenda itaque, voluptate sequi, vero rerum dicta alias voluptates vitae quod veniam obcaecati facere. Earum.</p>
        </div>
    </div>

 

 

 

---

 

 

flex 코딩 적용하기

.container{
    display:flex; /* flex 적용 */
    height:100vh;
    background: gainsboro;
}

기본값은 가로 정렬

 

---

방향 세로값으로 변경하기

flex-direction: column;

.container{
    display:flex; /* flex 적용 */
    flex-direction: column; /* flex 방향세로로 변경 */
    height:100vh;
    background: gainsboro;
}

 

---

가로방향 역순 정렬

flex-direction: row-reverse

.container{
    display:flex; /* flex 적용 */
    flex-direction: row-reverse;
    height:100vh;
    background: gainsboro;
}

 

 

---

 

세로방향 역순 정렬

flex-direction: column-reverse

.container{
    display:flex; /* flex 적용 */
    flex-direction: column-reverse;
    height:100vh;
    background: gainsboro;
}

 

 

---

 

flex-wrap: wrap

container가 item 폭보다 더 줄었을때 밑으로 떨어지도록 나타내기

.container{
    display:flex; /* flex 적용 */
    flex-wrap: wrap;
    height:100vh;
    background: gainsboro;
}

 

---

 

 

justify-content 정렬

 

flex-start

.container{
    display:flex; /* flex 적용 */
    justify-content: flex-start;
    height:100vh;
    background: gainsboro;
}

 

---

 

 

flex-end

.container{
    display:flex; /* flex 적용 */
    justify-content: flex-end;
    height:100vh;
    background: gainsboro;
}

---

 

center

.container{
    display:flex; /* flex 적용 */
    justify-content: center;
    height:100vh;
    background: gainsboro;
}

 

---

 

space-around

.container{
    display:flex; /* flex 적용 */
    justify-content: space-around;
    height:100vh;
    background: gainsboro;
}

 

item양쪽에 여백이 생깁니다.

 

예를들어

10px item 10px 10px item 10px 이런식으로 배치가 됩니다.

 

 

---

 

space-between

.container{
    display:flex; /* flex 적용 */
    justify-content: space-between;
    height:100vh;
    background: gainsboro;
}

 

 

첫번째오 마지막 아이템은 양쪽 끝에 배치되고 나머지 아이템들이 균등하게 배치 됩니다.

---

 

 

space-evenly

.container{
    display:flex; /* flex 적용 */
    justify-content: space-evenly;
    height:100vh;
    background: gainsboro;
}

얼핏보면 sapce-around와 비슷해 보이지만 evenly는 전부 같은 여백을 가지게 됩니다.

 

 

에를 들면

10px item 10px item 10px 이런식으로 정렬 됩니다.

 

※ IE와 엣지에서는 지원이 안되고 space-aroud로 처리됩니다.