flexbox : justify-content

목차

• justify-content
• flex-start
• flex-end
• center
• space-between
• space-around

---

 justify-content

주축 방향을 기준으로 어떻게 정렬할지 정함

---

 

 flex-start

기본값, 주축의 시작점에 맞춰 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    justify-content: flex-start;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

 flex-end

주축의 끝점에 맞춰 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    justify-content: flex-end;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

 center

주축의 중앙에 맞춰 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    justify-content: center;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

 space-between

주축의 시작점에 첫번째 항목, 끝점에 마지막 항목을 배치 후 그사이에 나머지를 같은 간격으로 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    justify-content: space-between;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

 space-around

주축에 같은 간격으로 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    justify-content: space-around;
}
.flex_item {
    border: 1px solid #000;
    width: 15vw;
    height: 15vh;
    line-height: 15vh;
    background-color: aqua;
    font-size: 5vw;
    text-align: center;
    color: red;
}

<div class="flex_container">
    <div class="flex_item">1</div>
    <div class="flex_item">2</div>
    <div class="flex_item">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

Github

Link