4.Flexbox

5 minute read

1. Flexbox 1

flex 박스의 목적은 정렬을 하기 위함이다. flex 박스가 없었을때는 float,position,table 이용하여 정렬을 했다면 지금은 flex만으로도 쉽게 정렬이 가능하게 되었다.
flexbox 사용방법
- 1.내가 정렬한 요소들을 지니고 있는 부모에게 display : flex 라고 선언해준다.
- 2.가로정렬 또는 세로정렬을 하기 위해서는 다음과 같은 코드를 함께 적는다.
  - flex-direction : row (가로방향) , default
  - flex-direction : row-reverse(가로의 역방향)
  - flex-direction : column (세로방향)
  - flex-direction : column-reverse(세로의 역방향)
- 1. axis(축) : flex를 사용하면 두개의 보이지 않는 축이 생긴다.
  - row
  - column
  - row-reverse
  - column-reverse
flex-wrap : 무조건 한줄에 모든요소를 정렬할것인지 아니면 상황에 따라서는 여러줄을 만들어서 정렬할것인지 정함
- flex-wrap : nowrap; (default) , 자식요소를 줄여서라도 row로 만듬
- flex-wrap : wrap; , 자식요소를 줄이지 않고 여러줄을 만들어 정렬

2. Flexbox 2

Flexbox는 Container와 item으로 구성되어있다.

Container의 속성값
- display : flex (지정된 선택자가 flexbox로 만들어짐)
- flex-direction : flex의 방향을 지정해줌
- flex-wrap : container가 item들을 한줄에 다 담을것인지 다음줄에 담을것이지 정해줌
- justify-contents : Item들을 Main axis 기준으로 어떻게 정렬될것인지를 정해줌
- align-item : Item들을 Cross axis 기준으로 어떻게 정렬될것인지를 정해줌
- align-content : 하나가 아닌 전체를 기준으로 cross-axis가 적용되며, 그 축으로 Item을 정렬해줄때 사용

item의 속성값

order: Item의 순서를 정해주는 속성 (현업에서 잘 사용하지는 않는다고함..)
Item의 순서를 설정합니다.Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.음수가 허용됩니다.
기본값은 0이며 , 오름차순으로 진행된다.
flex : item(증가,감소,기본)를 설정하는 단축 속성

값

의미

기본값

flex-grow	Item의 증가 너비 비율을 설정	0
flex-shrink	tem의 감소 너비 비율을 설정	1
flex-basis	Item의 (공간 배분 전) 기본 너비 설정	auto

.item {
  flex: flex-grow flex-shrink flex-basis;
}

.item {
  flex: 1 1 20px; /* 증가너비 감소너비 기본너비 */
  flex: 1 1; /* 증가너비 감소너비 */
  flex: 1 20px; /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

flex-grow를 제외한 개별 속성은 생략할 수 있습니다. 만약 flex: 1;로 작성하면 flex-grow: 1;과 같습니다. 그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 되겠죠? 즉 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있습니다만 그렇지 않습니다. flex-basis의 기본값은 auto입니다만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용됩니다. 다시 정리하면 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것입니다. 이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의합시다!

flex-grow : flex-grow 속성은 flex item의 확장에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다

속성값이 0이면 flex container의 크기가 커져도 flex item의 크기가 커지지 않고 원래 크기로 유지된다.

flex container의 크기가 커질 때 flex item의 크기도 커지게 하려면 1 이상의 값을 속성값으로 설정한다. 속성값이 1 이상이면 flex item의 원래 크기에 상관없이 flex container를 채우도록 flex item의 크기가 커진다.

flex-shrink : flex-shrink 속성은 flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다. 기본값은 1이다.

속성값이 0이면 flex container의 크기가 flex item의 크기보다 작아져도 flex item의 크기가 줄어들지 않고 원래 크기로 유지된다. 속성값이 **1 이상이면 flex container의 크기가 flex item의 크기보다 작아질 때 flex item의 크기가 flex container의 크기에 맞추어 줄어든다.

flex-basis : flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이다. 기본값은 auto다.

flex-basis 속성에서 auto와 함께 자주 사용하는 속성값이 0이다. flex-basis 속성의 값을 0으로 설정하면 flex item은 절대적 flex item(absolute flex item)이 되어 flex container를 기준으로 크기가 결정된다.

주의 : lex-basis 속성의 값을 0으로 선언할 때에는 flex-basis: 0px, flex-basis: 0%와 같이 단위도 함께 설정해야 한다.

flex-basis 속성의 값을 auto로 설정하면 flex item은 상대적 flex item(relative flex item)이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.

;

꿀팁

  .item {
  flex: 1;
  /* flex : 1 1 0 */

  flex: auto;
  /* flex: 1 1 auto */

  flex: none;
  /* 0 0 auto */

  flex: initial;
  /* 0 1 auto */
  }

3. Flexbox 3

우리가 axis(축)에서 Main axis와 Cross axis를 배웠다.
1.justify-content : Main axis 축으로 무언가 정렬해줄때 사용
2.align-item or align-content : Cross axis 축으로 무언가 정렬해줄때 사용
3.align-item vs align-content
- 개념
  - align-item : 각각에 cross-axis가 적용되며, 그 축으로 무언가 정렬해줄때 사용
  - align-content : 하나가 아닌 전체를 기준으로 cross-axis가 적용되며, 그 축으로 무언가 정렬해줄때 사용
order : HTML에 의해 마크업된 위치와 상관없이 flex인 자식요소한테 주는 속성인 Order을 통해 자식의 위치를 내 마음대로 정할수 있다.
- default 값이 0 이며 , 오름차순순으로 배치된다.

꿀팁

첫번째 꿀팁

<div class="parent">
  <div class="child blue"></div>
  <div class="child yellow"></div>
  <div class="child red"></div>
</div>

.parent {
  display: flex;
  flex-direction: row;
  width: 400px;
  flex-wrap: wrap;
  height: 900px;
  background-color: gray;
}

.child {
  width: 200px;
  height: 200px;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}

윗 코드를 실행하면 3번째 박스가 바로 밑으로 위치하는게 아니라 다음과 같은 모습이 되는데, 그 이유는 flex의 문제점중 하나라고 한다.

여기서 2개씩 Main axis와 Cross axis 가 생기며, 각각의 Cross axis 축으로 정렬해줄때 사용하는 것이 align-item 이고

이 각각의 Main axis와 Cross axis을 하나의 축으로 보게하며, 그 하나의 Cross axis축으로 정렬해줄때 align-content를 사용해서 정렬해준다.

두번째 꿀팁

선 align-item 쓰고 이상하다 싶으면, 후 align-content 사용

3. Flexbox 훈련 1&2 (float vs flex)

Menubar ;

float를 활용했을때 코드

<body>
  <ul class="tab-menu">
    <li class="tab-menu-item">
      <a href="#">Summary</a>
    </li>
    <li class="tab-menu-item active">
      <a href="#">Emails</a>
    </li>
    <li class="tab-menu-item">
      <a href="#">Files</a>
    </li>
    <li class="tab-menu-item">
      <a href="#">Mentions</a>
    </li>
  </ul>
</body>

.tab-menu {
  padding-left: 0;
  border-bottom: 1px solid #e5eaef;
  list-style-type: none;
}

.tab-menu::after {
  content: "";
  display: block;
  clear: both;
}

.tab-menu-item {
  float: left;
  margin-right: 16px;
}

.tab-menu-item.active {
  border-bottom: 2px solid #2860e1;
}

.tab-menu-item.active a {
  font-weight: 500;
  color: #2860e1;
}

.tab-menu-item:last-child {
  margin-right: 0;
}

.tab-menu-item a {
  display: block;
  padding: 16px 20px;
}

flex를 활용했을때 코드

.tab-menu {
  display: flex;
  flex-direction: row;
  /* default */
  justify-content: flex-start;
  /* default */
  flex-wrap: nowrap;
  /* default */

  align-items: center;
  padding-left: 0;
  border-bottom: 1px solid #e5eaef;
  list-style-type: none;
}

.tab-menu-item {
  margin-right: 16px;
}

.tab-menu-item.active {
  border-bottom: 2px solid #2860e1;
}

.tab-menu-item.active a {
  font-weight: 500;
  color: #2860e1;
}

.tab-menu-item:last-child {
  margin-right: 0;
}

.tab-menu-item a {
  display: block;
  padding: 16px 20px;
}

결론 : float의 용도 자체는 정렬을 위한것이 아니기 때문에 정렬을 하는데 float를 사용하는것의 시대는 이미 지났다. 따라서 flex를 활용한 coding을 하는 것이 중요하다. 나중에 포트폴리오를 만들떄도 float를 활용한 것과 flex를 활용한 두가지를 비교한 포트폴리오를 만들어도 좋을것 같다.

4. Flexbox 훈련 3

yosup’s coding

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(201, 201, 201);
}

.profile {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  width: 400px;
  text-align: center;
}

/* 으잉? text-align은 block요소 안에있는 inline과 inline-block요소의 좌우 가운데 정렬을 위해 사용한다고 했는데
h1과 p 테그는 block요소잖어..?? 
이 바보야. h1와 p테그가 block요소이기 그 안에 텍스트가 inline요소잖아 그래서 부모한테 text-align을 줬기 떄문에 나머지가 다 가운데 정렬되는거지
*/

.profile-image {
  border-radius: 50%;
  width: 80px;
  margin-top: 20px;
}

.profile h1 {
  margin-top: 10px;
}

.profile-detail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-top: 20px;
}

kimbug’s coding

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: black;
}

.profile {
  border-radius: 10px;
  background-color: white;
  width: 386px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  padding: 32px 40px;
}

.profile-image {
  display: block;
  /* 이미지를 display block 요소로 만드는 것은 width와 height가 이미지가 inline임에도 적용되기 때문에, 명시적으로 blcok이라 처리를 한것임 , 까먹지 말자 */
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 16px;
}

.profile-name {
  margin-bottom: 5px;
}
.profile-location {
  margin-bottom: 32px;
}

.profile-detail {
  width: 100%;
  display: flex;
  /* flex-direction: row;  default*/
  /* flex-wrap: nowrap; default */
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

꿀팁

1. 이미지는 inline임에도 width와 heigh가 조절되기 때문에, 명시적으로 display:block을 해주는 습관을 들이자.
1. flex를 사용한 가운데 정렬과, position을 사용한 가운데 정렬 과연 어떤게 더 실무에 적합한 방법일까?

Share on

Twitter Facebook LinkedIn

정요섭

4.Flexbox

1. Flexbox 1

2. Flexbox 2

꿀팁

3. Flexbox 3

꿀팁

3. Flexbox 훈련 1&2 (float vs flex)

4. Flexbox 훈련 3

꿀팁

Share on

Leave a comment

You may also enjoy

외부IP, 내부IP 그리고 포트넘버

클래스형 컴포넌트 vs 함수형 컴포넌트

React Hook의 최적화

일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)