css

CSS - 플렉스박스 : 항목(Flex items)

2월 04, 2020
플렉스 항목(Flex items)은 플렉스 컨테이너 안에서 플렉스 라인(Flex Line) 이라는 가상의 선을 따라 정렬합니다.

다음 표의 속성을 사용할 수 있습니다.

값 설 명
order Item 의 순서를 설정. 기본값: 0
가장 작은 수를 첫 부분에 가장 큰 수를 마지막에 배치.
(음수 사용 가능합니다.)
flex Item 의 너비 비율을 설정.
(음수는 사용할 수 없음)
  • flex-grow: item 의 너비 증가 값을 비율로 설정. 기본값: 0
      (container 에 여백이 있을 때 item 의 크기를 늘림)
  • flex-shrink: item 의 너비 감소 값을 비율로 설정. 기본값: 1
      (container 에 item 이 넘칠 때 item 의 크기를 줄임)
  • flex-basis: item 의 기본 너비를 설정. 기본값: auto
      (width 에 사용할 수 있는 모든 단위를 지정 가능함)
flex 는 위의 단축 속성이며,
[flex-grow] [flex-shrink] [flex-basis] 순으로 설정.

Ex.1) flex: 1 1 36px; /* 증가 감소 기본 너비 */
Ex.2) flex: 1 1; /* 1 1 auto 와 같음 */
Ex.3) flex: auto; /* 1 1 auto 와 같음 */
align-self 수직 방향으로 item 을 개별적으로 배치.
(align-items 속성보다 우선 적용됨)
  • auto: align-items 속성을 상속받음. 기본값: auto
      (단, 부모 요소에 속성값이 없는 경우 stretch 를 적용됨)
  • stretch: item 박스를 늘려서 container 공간을 채움.
      기본값 auto
  • flex-start: item 을 위쪽에 배치.
  • flex-end: item 을 아래쪽에 배치.
  • center: item 을 가운데에 배치.
  • baseline: item 을 문자 기준선에 맞춰 배치.


Order 예제 

이 속성은 컨테이너 안에 있는 플렉스 항목의 순서를 설정할 수 있습니다.

처음 나오는 item 은 “A” 이고 마지막으로 나오는 item 은 “E”입니다. 여기서 order 가 3이면 가장 큰 수이므로 “A”를 마지막에 배치하고, 그 다음 작은 수는 order 가 2이므로 “A” 다음에 “E”를 배치하면 다음 결과를 얻습니다.

<style>
.container {
  background-color: #efefef;
  width: 170px;
  height: 170px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
}
.container div {
  width: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
/* 처음 나오는 item은 A */
.container div:first-child{
  order: 3;
  background-color: blue;
}
/* 마지막으로 나오는 item은 E */
.container div:last-child{
  order: 2;
  background-color: red;
}
</style>

<div class="container">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>


다음 그림을 통해 좀 더 확실히 알 수 있지 않을까 싶습니다.




Flex 예제

이 속성은 플렉스 항목의 너비를 상대적인 비율로 설정할 수 있습니다.

<style>
.container {
  background-color: #efefef;
  width: 170px;
  height: 170px;
  padding: 10px;
  margin: 10px;

  display: flex;
}
.container div:first-child{ flex: 1 1 0; }
.container div:nth-child(2){ flex: 2 2 0; }
.container div:nth-child(3){ flex-basis: 15px; }

.container div {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>


다음 그림에 명시된 값을 flex 속성에 다르게 설정했을 때의 결과입니다.



align-self 예제

이 속성은 수직 방향으로 item 을 개별적으로 배치할 수 있습니다. align-items 속성보다 우선으로 적용되며 플렉스 라인을 기준으로 정렬됩니다.

아래 그림의 결과가 단번에 이해가 안갈 수도 있습니다. 자세히 보면 항목을 기준으로 배치한 것이 아니라 컨테이너를 기준으로 하였습니다.

<style>
.container1, .container2, .container3, .container4, .container5 {
  background-color: #efefef;
  width: 170px;
  height: 170px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
}

.container2 div{ align-self: flex-end; }
.container4 div{ align-self: center; }

.container1 div, .container2 div, .container3 div, .container4 div, .container5 div {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container3">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container4">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container5">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>


아래 그림을 보면 4번째 컨테이너의 align-self 속성을 baseline 으로 설정하였는데, 컨테이너가 밑으로 내려간 것을 확인할 수 있습니다. baseline 은 문자를 기준으로 정렬되기 때문입니다.

<style>
.container1, .container2, .container3, .container4, .container5, .container6 {
  background-color: #efefef;
  width: 140px;
  height: 170px;
  padding: 10px;
  margin: 10px;

  display: inline-flex;
  align-items: center;
}

.container1 div:nth-child(2) { align-self: flex-start; }
.container2 div:nth-child(2) { align-self: flex-end; }
.container3 div:nth-child(2) { align-self: center; }
.container4 div:nth-child(2) { align-self: baseline; }
.container5 div:nth-child(2) { align-self: stretch; }
.container6 div:nth-child(2) { align-self: auto; }

.container1 div, .container2 div, .container3 div, .container4 div, .container5 div, .container6 div {
  width: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container3">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container4">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container5">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
<div class="container6">
  <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>


Tag:

0 Comments

0 댓글