11. Flex

flex란?기본 속성 정보 1. 새로운 display 속성입니다.2. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 합니다. 3. flex는 자신의 직계자식까지만 영향을 미칩니다.1. flex-direction 2. flex-item들은 기본적으로 Axis를 기준으로 정렬됩니다.3. justify-content 4. Axis 와 Cross-Axis 5. align-items, align-content 6. flex-wrap 7. flex-basis 8. flex-grow 9. flex-shrink 10. 그 밖의 flex-item 에 사용하는 속성들 11. flex 연습 사이트 및 좋은 글 (실습) 전체 복습 코드 및 성배 레이아웃 그리기

flex란?

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합입니다. MDN 문서와 1분코딩의 블로그, code pen에서 flex가 실행되는 화면을 바로 확인하실 수 있습니다.

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 "차세대 CSS 레이아웃" 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,'좀 편안하게 누군가 나의 공부를 이끌어주면 좋겠다.'라고 생각하고 계신다면, 아래의 배너의 강좌를 살펴보세요. 바야흐로 2020년입니다. 2020 원더키디에서 처럼 우주선이 우리 눈 앞에 막 날아 다니지는 않지만, 온갖 핑계(주로 "그거 IE에서 안되잖아요!")로 미루어왔던 Flex와 Grid를 공부해야 할 때는 충분히 되었다고 생각합니다.

https://studiomeal.com/archives/197

Flexbox playground

https://codepen.io/enxaneta/full/adLPwv

기본 코드


/*code base*/

body {
  font-family: sans-serif;
  box-sizing: border-box;
  font-weight: 600;
}

.container {
display: flex;
  background: #f9f1f0;
  border: 2px solid black;
  width: 700px;
  height: 500px;
}

.box {
  background-color: pink;
  border: 2px solid black;
  width: 100px;
  height: 100px;
  margin: 10px;
  text-align: center;
  line-height: 100px;
}


<!DOCTYPE html>
<html>
  <head>
    <title>Flex</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <div class="container">
      <div class="box">box1</div>
      <div class="box">box2</div>
      <div class="box">box3</div>
    </div>
  </body>
</html>

기본 속성 정보

아래 여러가지 실습을 하게 될텐데 개발자 도구를 참고하시면 GUI 기능으로 잘 정리가 되어 있으니 참고하시면서 개발하시길 바랍니다.

1. 새로운 display 속성입니다.


display:flex;
display:inline-flex;

2. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 합니다.

이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item이라고 부릅니다.

3. flex는 자신의 직계자식까지만 영향을 미칩니다.

1. flex-direction

정렬 방향을 결정합니다.


.container {
  display: flex;
	flex-direction : row;
}


.container {
	display : flex;
	flex-direction : row-reverse;
}


.container{
	display : flex;
	flex-direction : column;	
}


.container{
	display : flex;
	flex-direction : column-reverse;	
}

2. flex-item들은 기본적으로 Axis를 기준으로 정렬됩니다.

기본 방향은 왼쪽에서 오른쪽입니다.

3. justify-content

축을 기준으로 배열의 위치를 조종하거나 아이템 간의 간격을 설정할 수 있습니다!


.container {
  display: flex;
  /* justify-content: flex-start; */
  /* justify-content: flex-end; */
	/* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
}

하나씩 주석 풀어서 실행해보기!

flex-direction : column 일때 / row일 때

** 실습해 봅시다! **


<article>
  <div class="left_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
  <div class="center">
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <div class="right_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</article>


div{
  width:50px;height:50px
}

.blue{background:blue}
.green{background:green}
.yellow{background:yellow}


article{  
  background:black;
  width:350px;
  height:300px;
}


.right_side, .center, .left_side{
  height:300px;
}

주어진 코드를 가지고 flex 속성을 추가해 아래와 같은 이미지로 배치해 보세요!

4. Axis 와 Cross-Axis

flex에는 axis와 짝을 이루는 cross-axis가 존재합니다. axis가 row 상태라면 cross-axis는 column 이고, axis 가 column 이면 cross-axis는 row 인 상태죠.

5. align-items, align-content

align-items는 cross-axis를 기준으로 이동합니다.

align-content: flex-container의 cross-axis 축의 아이템들이 여러 줄일 때 사용 가능합니다.


.container {
  display: flex;
	/* align-items: stretch; (기본값) */ 
  /* align-items: center; */
  /* align-items: flex-start; */
  /* align-items: flex-end; */
}

하나씩 주석 풀어서 실행해보기!

flex-direction : column / row / row-reverse / column-reverse

** 실습해 봅시다! **

6. flex-wrap

flex는 자식의 크기가 자신보다 크다고 해서 강제로 조절하지 않습니다. 자식요소를 감싸주는 기능입니다.


<div class="container">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
  <div class="box">box4</div>
  <div class="box">box5</div>
  <div class="box">box6</div>
</div>


.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* flex-wrap: wrap; */
  /* flex-wrap: nowrap; */
	/* flex-wrap: wrap-reverse; */
}

하나씩 주석풀어서 실행해보기!

flex-direction : column / row / row-reverse / column-reverse

7. flex-basis

자식요소에 사용합니다! flex item 들의 크기를 특정합니다. width, height와 다른점은 axis 방향에 따라 달라진다는 것 그리고 내부의 컨텐츠에 따른 유연한 크기입니다. 기본값은 auto. auto일 때는 width, height 값을 사용합니다.

만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시됩니다.

8. flex-grow

자식요소에 사용합니다! flex-basis의 값에서 더 늘어나도 되는지 지정하는 값으로, 할당된 값에 따라 자신을 감싸는 컨테이너의 공간을 할당하도록 합니다.

flex-grow : 1 —> 자식 요소들이 모두 동일한 크기의 공간을 할당받습니다.

flex-grow : 2 —> 특정한 하나의 자식에게만 줄 경우 다른 자식요소보다 두배의 공간을 할당받습니다. 만약 자식요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라집니다.

9. flex-shrink

자식요소에 사용합니다. flex-grow에 반대되는 개념으로 flex-basis의 값에서 더 줄어들어도 되는지 지정하는 값입니다. 크기를 고정하거나 줄이는 역할을 합니다.

0의 값을 사용할 경우 컨테이너의 크기가 줄어도 값은 고정됩니다. 마이너스 숫자는 받아들이지 않으며 1은 기본값입니다.

지금 까지 배운 7, 8, 9 속성의 값을 축약하여 사용할 수 있는 것이 바로 flex 속성입니다.


/* flex: flex-grow, flex-shrink, flex-basis */
flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */