flexbox훈련(1,2)

전에 float으로 만든 예제들을 flex로 대체해보면서 flex가 얼마나 괜찮은 속성인지 알아보자…

전에 만들었던 예제에서 float:left를 지우면 이런 그림이 나온다.

.tab-menu {
    **display:flex;
    flex-direction: row;
    flex-wrap: nowrap;**
    padding-left: 0;
    border-bottom: 1px solid #e5eaef;
    list-style-type: none;
  }

여기에 이것만 추가해도… 결과는?

justify-content: flex-start;
align-items: center;

이정도만 더해주면 더 좋다. 바로 가로정렬되었음. 와우

flexbox훈련(3)

이번에는 새로운 예시를 만들어보자.

이렇게 생긴 유저 프로필을 만들면 된다.

flex를 배우니.. 간단하다.