css flex에 대해서

Posted by negabaro kim on Friday, May 18, 2018 Tags: css   5 minute read

flex란

flex가 등장하기전에는 값을 통해서 마진값을 조정해야하고 디바이스마다 표시되는 설정이 다르므로 작업해야할 내용이 많고 비효율적이었음

flex를 이용하면 이런 부분이 개선됨

flex의 컨셉

부모 element에게 display: flex;를 걸어주면 자식element에 flex설정이 적용됨

다시한번 자식element에 flex를 적용하고 싶을때는 그 자식의 부모element에 설정을 줄것

flex의 옵션

flex에는 여러가지 옵션이 있는데 그중 사용빈도가 높은

justify-content,align-items,flex-direction이 있다.

일단 flex설정을 넣어주면 display: inlike-block이라 지정안해도 인라인 블록 방식처럼(가로) 출력됨

flex-direction의 설정이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀜.

flex-direction

  1. row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  2. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  3. column: 요소들을 위에서 아래로 정렬합니다.
  4. column-reverse: 요소들을 아래에서 위로 정렬합니다.

justify-content

좌우 정렬(flex-direction이 컬럼일 경우 상하 정렬)

  1. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  2. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  3. center: 요소들을 컨테이너의 가운데로 정렬합니다.
  4. space-between: 요소들 사이에 동일한 간격을 둡니다.
  5. space-around: 요소들 주위에 동일한 간격을 둡니다.

align-items

상하 정렬(flex-direction이 컬럼일 경우 좌우 정렬)

  1. flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  2. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  3. center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  4. baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  5. stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex만져보기

이하 코드를 이용해서 flex의 움직임을 이해해보자

부모 자식관계는 이하와 같다.

father -> box

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex</title>
  <style>
  html,body{
    height: 100%;
  }
  .father{
    height: 100%;
  }
  .box{
    background-color: red;
    width: 200px;
    height: 200px;
    border:1px solid black;
    color:white;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

justify-content: flex-start;

요소들을 컨테이너의 왼쪽으로 정렬(디폴트 설정임)

justify-content: flex-start;

image

justify-content: flex-end;

요소들을 컨테이너의 오른쪽으로 정렬

justify-content: flex-end;

image

justify-content: space-around;

요소들 주위에 동일한 간격을 둠

justify-content: space-around;

flex-justify-space-around

space-around는 가장 왼쪽,오른쪽 에도 간격이 있다.

justify-content: space-between;

요소들 사이에 동일한 간격을 둠

justify-content: space-between;

flex-justify-space-between

space-around와의 차이는 가장 왼쪽,오른쪽의 간격이 없다는걸 알 수 있다.

align-items: center;

요소들을 컨테이너의 세로선 상의 가운데로 정렬

align-items: center;

image

align-items: flex-start;

요소들을 컨테이너의 꼭대기로 정렬(디폴트 설정)

align-items: flex-start;

image

align-items: flex-end;

요소들을 컨테이너의 바닥으로 정렬

align-items: flex-end;

image

다음은 flex-direction: column 설정에 대해 알아보자

디폴트 설정

이하 코드를 기준으로 동작확인을 해보자. 먼저 아무것도 설정안해줬을 경우

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex</title>
  <style>
  html,body{
    height: 100%;
  }
  .father{
    height: 100%;
  }
  .box{
    background-color: red;
    width: 200px;
    height: 200px;
    border:1px solid black;
    color:white;
  }
  </style>
</head>
<body>
  <div class="father">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</body>
</html>

no-flex

이렇게 세로로 박스가 표시됨 화면 크기를 줄여도 크기가 줄어들지 않음.

display: flex;

flex설정을 주면

.father{
  height: 100%;
  display: flex;
}

flex

가로로 박스가 표시됨 그리고 화면을 줄이면 크기에 맞게 박스도 작아짐

display: flex + flex-direction: column;

여기서 flex-direction: column 설정을 더해주면

다시 세로로 바뀜 디폴트 설정과의 차이는 화면을 줄이면 크기에 맞게 박스가 작아짐

.father{
  height: 100%;
  display: flex;
  flex-direction: column;
}

flex-add-column

flex-direction: column이 적용된순간 align-items과justify-content의 반대가됨

flex-direction: column이 적용된순간 align-items은 좌우 -> 상하 정렬로 justify-content은 상하 -> 좌우 정렬로 바뀌게됨

flex공부에 도움이 되는 사이트

http://flexboxfroggy.com/#ko