flexbox : align-content

목차

• align-content
• flex-start
• flex-end
• center
• space-between
• space-around
• stertch

---

 align-content

여러 줄일때 교차축 정렬 방법을 지정함

기본적으로 flex-wrap:wrap; 인 상태에서 동작함

---

 flex-start

교차축의 시작점에 맞추어 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    height: 5vh;
    line-height: 5vh;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">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;
    flex-wrap: wrap;
    align-content: flex-end;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    height: 5vh;
    line-height: 5vh;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">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;
    flex-wrap: wrap;
    align-content: center;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    height: 5vh;
    line-height: 5vh;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">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;
    flex-wrap: wrap;
    align-content: space-between;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    height: 5vh;
    line-height: 5vh;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">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;
    flex-wrap: wrap;
    align-content: space-around;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    height: 5vh;
    line-height: 5vh;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

 stretch

교차축에 가득 차게 배치함

.flex_container {
    background-color: gray;
    width: 60vw;
    height: 60vh;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
}
.flex_item {
    border: 1px solid #000;
    width: 30vw;
    background-color: aqua;
    font-size: 3vw;
    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 item_3">3</div>
    <div class="flex_item">4</div>
    <div class="flex_item">5</div>
</div>

---

 

Github

Link