[CSS] 21) 플렉스박스 (#display:flex)

Codecademy front-end engineer course

DAY19

• Layout with Flexbox

---

- What is Flexbox? 플렉스박스란?

While flexbox is not meant to lay out entire pages, it is useful for positioning elements, whether individually or in groups.

There are two important components to a flexbox layout: flex containers and flex items.

 

---

- display: flex 플렉스 디스플레이

;한줄에 배열해주는 속성

 

Flex containers are helpful tools for creating websites that respond to changes in screen sizes. 

div.container {
  display: flex;
}

-> all divs with the class container are flex containers. If they have children, the children are flex items.

A div with the declaration display: flex; will remain block level — no other elements will appear on the same line as it.

However, it will change the behavior of its child elements. Child elements will not begin on new lines!

flex와 block의 차이

 

---

 

- inline-flex 인라인 플렉스

; 여러 개를 인라인화하는 속성

 

What if we want multiple flex containers to display inline with each other? -> we would use display: inline

<div class="container">
  <p>I’m inside of a flex container!</p>
  <p>A flex container’s children are flex items!</p>
</div>
<div class="container">
  <p>I’m also a flex item!</p>
  <p>Me too!</p>
</div>

.container {
  width: 200px;
  height: 200px;
  display: inline-flex;
}

-> Without a width, each div would stretch the entire width of the page.

The paragraphs within each div would also display on top of each other (because paragraphs are block-level elements.)

When we change the value of the display property to inline-flex, the divs will display inline with each other if the page is wide enough.

(* If the parent element is too small, the flex items will shrink to accommodate the parent container’s size.)

 

inline-flex

 

---

 

- justify-content

; 어디서부터 시작할지 정해주는 속성 (가로버전)

 

display value of parent containers to flex or inline-flex, all of the child elements (flex items) moved toward the upper left corner of the parent container. This is the default behavior of flex containers and their children.

Also, We can specify how flex items spread out from left to right, along the main axis.

 

To position the items from left to right, we use a property called justify-content.

.container {
  display: flex;
  justify-content: flex-end;
}

flex-start	starting from the left of the parent container, with no extra space between or before them.
flex-end	with the last item starting on the right side of the parent container, with no extra space between or after them.
center	in the center of the parent container with no extra space before, between, or after them.
space-around	items will be positioned with equal space before and after each item, resulting in double the space between elements.
space-between	items will be positioned with equal space between them, but no extra space before the first or after the last elements.

 

---

 

 

- align-items

; 어디서부터 시작할지 정해주는 속성 (세로 버전)

The align-items property makes it possible to space flex items vertically.

flex-start	all elements will be positioned at the top of the parent container.
flex-end	all elements will be positioned at the bottom of the parent container.
center	the center of all elements will be positioned halfway between the top and bottom of the parent container.
baseline	the bottom of the content of all items will be aligned with each other.
stretch	if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).

 

---

 

 

-flex-grow

;비율에 맞춰서 컨테이너를 채우는 속성 (정수로 값 표시)

 

This property — flex-grow — is the first we have learned that is declared on flex items. (not declared on flex containers, or the parent elements)

The flex-grow property allows us to specify if items should grow to fill a container and also which items should grow proportionally more or less than others.

 

예제 코드

<div class="container">
  <div class="side">
    <h1>I’m on the side of the flex container!</h1>
  </div>
  <div class="center">
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class="side">
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-grow: 1;
}
 
.center {
  width: 100px;
  flex-grow: 2;
}

In the example above, the .container div has a display value of flex, so its three child divs will be positioned next to each other. (If there is additional space in the .container div (in this case, if it is wider than 300 pixels), the flex items will grow to fill it.)

The .center div will stretch twice as much as the .side divs.

For example, if there were 60 additional pixels of space, the center div would absorb 30 pixels and the side divs would absorb 15 pixels each.

*If a max-width is set for an element, it will not grow larger than that even if there is more space for it to absorb.

 

---

 

- flex-shrink

;비율에 맞춰서 컨테이너에 따라 줄어드는 속성 (정수로 값 표시)

 

*Just as the flex-grow property proportionally stretches flex items,

the flex-shrink property can be used to specify which elements will shrink and in what proportions.

전체 너비가 좁을 때, flex-grow의 디폴트 값이 0이기 때문에 알아서 줄어드는 경우는 없다. -> flex-shrink이용하기!

 

예제코드

<div class="container">
  <div class="side">
    <h1>I'm on the side of the flex container!</h1>
  </div>
  <div class="center">
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class="side">
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>

.container {
  display: flex;
}
 
.side {
  width: 100px;
  flex-shrink: 1;
}
 
.center {
  width: 100px;
  flex-shrink: 2;
}

In the example above, the .center div will shrink twice as much as the .side divs if the .container div is too small to fit the elements within it.

If the content is 60 pixels too large for the flex container that surrounds it, the .center div will shrink by 30 pixels and the outer divs will shrink by 15 pixels each

*Keep in mind, minimum and maximum widths will take precedence over flex-grow and flex-shrink

 

 

---

- flex-basis

; 늘어나고 줄어들기 전, 너비를 조정하는 속성

 

Another way of specifying the width of a flex item is with the flex-basis property. flex-basis allows us to specify the width of an item before it stretches or shrinks.

예제코드

<div class="container">
  <div class=”side”>
    <h1>Left side!</h1>
  </div>
  <div class="center">
    <h1>Center!</h1>
  </div>
  <div class="side">
    <h1>Right side!</h1>
  </div>
</div>

.container {
  display: flex;
}
 
.side {
  flex-grow: 1;
  flex-basis: 100px;
}
 
.center {
  flex-grow: 2;
  flex-basis: 150px;
}

-> In the example above, the .side divs will be 100 pixels wide and the .center div will be 150 pixels wide if the .container div has just the right amount of space (350 pixels, plus a little extra for margins and borders).

If the .container div is larger, the .center div will absorb twice as much space as the .side divs.

 

---

 

 

-flex

The flex property allows you to declare flex-grow, flex-shrink, and flex-basis (in that order) all in one line.

.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}
 
.small {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 100px;
}

.big {
  flex: 2 1 150px;
}
 
.small {
  flex: 1 2 100px;
}

 

---

 

 

-flex-wrap

;flex된 개체를 어떻게 순서를 정할 건지 정해주는 속성.

 

 we might want flex items to move to the next line when necessary. This can be declared with the flex-wrap property.

wrap	child elements of a flex container that don’t fit into a row will move down to the next line
wrap-reverse	the same functionality as wrap, but the order of rows within a flex container is reversed
nowrap	prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.

*Note: The flex-wrap property is declared on flex containers.

 

 

---

 

- Align-content

; 컨테이너에 들어갈 내용이 여러 개일때, 순서를 정해주는 속성.

 

* align-items is for aligning elements within a single row.

BUT If a flex container has multiple rows of content, we can use align-content to space the rows.

flex-start	all rows of elements will be positioned at the top of the parent container with no extra space between.
flex-end	all rows of elements will be positioned at the bottom of the parent container with no extra space between.
center	all rows of elements will be positioned at the center of the parent element with no extra space between.
space-between	all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
space-around	all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
stretch	if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).

 

---

 

- flex-direction

;플렉스할 때 방향을 설정 가능하다.

메인 축과 크로스 축에 대한 속성은 위의 내용과 같고, 각각의 축에 대해 row인지 column인지를 설정할 수 있다.

 

 flex containers have two axes: a main axis(horizontal)and a cross axis(vertical).

 

The main axis is used to position flex items with the following properties:

1. justify-content
2. flex-wrap
3. flex-grow
4. flex-shrink

The cross axis is used to position flex items with the following properties:

1. align-items
2. align-content

우리는 main축과 cross축을 자유자재로 변경 가능하다.

-> If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically

 

The flex-direction property can accept four values:

row	elements will be positioned from left to right across the parent element starting from the top left corner (default).
row-reverse	elements will be positioned from right to left across the parent element starting from the top right corner.
column	elements will be positioned from top to bottom of the parent element starting from the top left corner.
column-reverse	elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

 

 

---

 

- flex-flow

 the flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
/*위 아래 코드들은 모두 같은 것.*/
.container {
  display: flex;
  flex-flow: column wrap;
}