코딩응애의 개발블로그

드림코딩 & 생활코딩 (CSS Flex box) 본문

HTML CSS

드림코딩 & 생활코딩 (CSS Flex box)

이너멜 2021. 9. 22. 17:56

* 드림코딩님 생활코딩님 강의를 듣고 제 나름 대로 정리한 글입니다. + 구글링에 도움도 받았습니다 

Flex box에는 중심축과 반대축이 존재하는데 예를 들어서 수직축이 중심축이라고 한다면 수직축에 반대인 수평축이 반대축이 되는것임 그리고 수직축이 중심축이 된다는 소리는 뭐냐면 아이템들이 위에서 아래로 정렬이 되고 수평축이 중심축이 된다면 왼쪽에서 오른쪽으로 정렬이 된다는 것을 뜻함 

Flex box

flex box로 만들고 싶다면 display: flex; 라고 적어주면 아이템들이 왼쪽에서 오른쪽으로 정렬이 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .container{
      background: powderblue;
      display: flex;
    }
    .item {
      width: 40px;
      height: 40px;
      border: 3px solid white;
    }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>
<!-- flex 효과를 주기 위해서 class 명은 같은것들은 그냥 본인 마음대로 정해도 되지만
부모와 자식 관계는 반드시 있어야 한다 -->

왼쪽이 display:flex; 적용하기전 오른쪽이 적용을 한 후 모습

각종 속성값들 ( flex-direction )

flex-direction 은 기본값이 row다 flex-direction : row-reverse; 해주면 오른쪽에서 왼쪽으로 정렬이 된다  여기서 중심축은 수평축이 된다 중심축을 수직축으로 바꾸고 싶다면 flex-direction : column; 해주면 위에서 아래로 정렬이 되고

flex-direction : column-reverse; 해주면 아래에서 위로 정렬이 된다. 

<style>
    .container{
      background: powderblue;
      display: flex;
      flex-direction: row;
    }
</style>
<!-- flex-direction: row; 이 자리에 원하는 속성값들을 써주면 된다 -->

왼쪽은 flex-direction : row-reverse; 오른쪽은 flex-direction : column; 적용된 모습 

 

flex-direction : column-reverse; 적용된 모습

각종 속성값들 ( flex-wrap )

flex-wrap 은 기본값이 nowrap 인데 이 뜻은 아이템들이 많아져도 한줄에 빼곡하게 있게 해주고 flex-wrap : wrap; 을 해주면 아이템들이 한줄에 꽉차면 자동적으로 다음 줄로 가게 한다 flex-wrap : wrap-reverse; 는 위에서 한것처럼 아래에서 위로 정렬이 된다 

<style>
    .container{
      background: powderblue;
      display: flex;
      flex-wrap: nowrap;
    }
</style>
<!-- flex-wrap: nowrap; 이 자리에 원하는 속성값들을 써주면 된다 -->

왼쪽이 flex-wrap : nowrap; 오른쪽이 flex-wrap : wrap; 적용한 모습 참고로 윈도우 창에 너비는 같다 
flex-wrap : wrap-reverse; 적용된 모습 

각종 속성값들 ( flex-flow )

flex-flow는 flex-direction과 flex-wrap 2가지를 동시에 쓸수 있는것이다 예를 들어 flex-flow : column nowrap; 이런식으로 쓸수 있다.

<style>
    .container{
      background: powderblue;
      display: flex;
      flex-flow: column nowrap;
    }
</style>
<!-- flex-flow: column nowrap; 이 자리에 원하는 속성값들을 써주면 된다 -->

flex-flow: column nowrap; 적용한 모습 

justify-content

아이템들을 어떻게 배치할건지 (중심축에서 컨텐츠들을 어떻게 배치할건지 결정하는것)

기본값은 flex-start 중심축이 어딘지에 따라 왼쪽에서 오른쪽으로 위에서 아래로 정렬이 된다 

그리고 flex-end는 오른쪽으로 배치를 해주고 column 일경우에는 아래쪽으로 배치를 해주는대 reverse와 다른점이 있다면 아이템에 순서는 유지한 상태로 배치를 해준다는 것이다 

<style>
    .container{
      background: powderblue;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
</style>

왼쪽이 flex-direction : column-reverse; 적용된 모습 오른쪽이 flex-end 

jusitify-content (center space-around space-evenly space-between) 

center는 아이템을 중간으로 이동을 해주고

space-around는 아이템 주위에 동일한 간격이 있어서 양끝과 아이템들 사이 간격이 다르다

space-evenly는 아이템과 아이템 사이 간격과 양끝과 아이템 사이 간격이 동일하다

space-between은 양끝과 아이템은 붙어있고 아이템 사이 간격만 동일하다   

<style>
    .container{
      background: powderblue;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
    }
</style>

왼쪽이 center 적용한 모습 오른쪽이 space-evenly 적용한 모습 
왼쪽이 space-around 적용한 모습 오른쪽이 space-between 적용한 모습

align-items

아이템들을 배치하는데 중심축에서가 아닌 반대축에서 아이템들을 어떻게 배치할지 결정하는 속성들

기본값은 stretch 이고 jusitify-content 처럼 flex-start flex-end center 가 있고 다른거로는 baseline 이라는것이 있다 

반대축을 세로라고 가정을 했을때 

<style>
    .container{
      background: powderblue;
      height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: flex-end;
    }
</style>
<!-- align-items: flex-end; 여기에다가 원하는 속성을 적용 시켜주면 된다 -->

왼쪽은 flex-start 적용한 모습 오른쪽은 center 적용한 모습 
flex-end 적용한 모습 

stretch는 기본값인데 아이템 크기를 따로 지정을 해주었을때는 flex-start와 다를 바 없어 보이지만 아이템 크기를 따로 지정을 하지 않고 auto로 지정을 해주었을때 자동으로 꽉 찹니다 즉 컨테이너에 맞게 늘립니다 지금은 세로축이 기준이기 때문에 세로로 채워집니다 

align-items : stretch; 적용한 모습 

마지막으로 baseline은 아이템들중 하나가 텍스트가 크기가 달라서 다른 아이템들과 위치가 다를때 써주면 텍스트 위치가 동일하게 보여짐 

baseline 으로 인해 텍스트 위치가 동일해 진 모습 

align-content

아이템들이 2줄 이상으로 배치가 되어있을때 줄을 어떻게 배치할건지 결정 아이템이 한줄이면 동작을 안함 그리고 

flex-wrap : wrap; 으로 해야함 

<style>
.container{
      background: powderblue;
      height: 100vh;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: baseline;
      align-content: flex-start;
    }
</style>
<!-- align-content: flex-start; 이 부분에 원하는 속성 값을 넣어주면 된다 -->

기본값은 stretch 이고 flex-start flex-end center space-between space-around 쓸수 있다. 

space-between은 아이템 줄과 양끝은 붙어있고 아이템 줄 간격이 서로 동일하다 

space-around는 아이템 줄 주위에 동일한 간격이 있어서 양끝과 아이템줄들 사이 간격이 다르다

왼쪽이 space-around 오른쪽이 space-between

item 속성값들 (flex-grow flex-shrink flex-basis)

flex-grow는 기본값이 0이다 그리고 쓰기전에는 컨테이너를 줄이거나 늘려도 아이템 자신의 고유한 크기를 유지할려고 하지만 값을 주면 컨테이너를 꽉 채우기 위해 아이템들이 늘어난다 

<style>
    .container{
      background: powderblue;
      height: 100vh;
      display: flex;
    }
    .item {
      background: red;
      width: 50px;
      height: 50px;
      border: 3px solid white;
    }
    .item:nth-child(2){
      flex-grow: 1; 
    }
    </style>
    <!-- .item:nth-child(2)는 클래스 값이 item인 element중에 2번째에 있는 값을 선택한다는 의미 
    -->

 

flex-grow 값을 준 상황 

flex-shrink는 컨테이너가 점점 작아졌을때 어떻게 행동하게 할지 정해주는것 기본값은 1 이고 만약 값을 0을 준다면 컨테이너가 작아져도 같이 줄어드는게 아닌 크기를 유지한다 

flex-basis는 아이템들이 공간을 얼마나 차지해야 되는지 세부적으로 명시할수 있게 도와준다 기본값은 auto 

align-self는 align-items 속성보다 우선 적용된다 아이템 별로 아이템들을 정렬할수 있다 아이템 하나만 따로 배치할수 있다 그리고 속성은 align-items가 사용하는 속성들과 같다 기본값 auto

저작자표시 비영리 변경금지

'HTML CSS' 카테고리의 다른 글

드림코딩(유튜브 클론코딩 하면서 처음알게된것들 정리 )  (0) 2021.10.24
드림코딩 (웹사이트 따라 만들기, 반응형 헤더편) + 생활코딩  (0) 2021.10.04
드림코딩&생활코딩(CSS 선택자, display, position)  (0) 2021.09.17
생활코딩(WEB2-CSS 반응형 디자인 ~ 마무리 )  (0) 2021.09.05
생활코딩(WEB2-CSS CSS 선택자를 스스로 알아내는 방법~그리드)  (0) 2021.08.23
'HTML CSS' Related Articles more
Comments