[CSS] flex속성

flex?🤑🚗💰💲🛫💶

flex는 html의 요소중 한 줄에 들어갈 수 없는 요소들을 한 줄에 들어갈 수 있게 해주는 속성 중 하나이다.

display의 속성이 block으로 설정된 요소는 한줄에 들어갈 수 없다.

사용법

한줄로 만들고 싶은 요소에게 속성을 부여하는 게 아니고 그 요소를 품고 있는 부모에게 속성을 부여하는 것이다.

  <body>
    <div></div> 
    <div></div>
  </body>

즉 div에게 flex의 효과를 주고 싶으면 div를 품고 있는 부모 body에 속성을 추가해주어야 한다.

<style>
    body {
        height: 100vh;
        display: flex;
    }
</style>

flex는 몇가지 속성으로 또 수정이 가능하다

속성	기능
justify-content	주축( ㅡ )의 정렬 속성
align-itmes	교차축( \| )의 정렬 속성
flex-direction	요소들을 가로로 나열 할지 세로로 나열 할지 결정 하는 속성
flex-wrap	브라우저의 공간이 부족할 때 요소들의 크기를 줄일지 줄바꿈을 할지 결정하는 속성

<style>
    body {
        height: 100vh;
        display: flex;
        justify-content: center; /* 주축을   센터로 정렬 */
        align-items: center;     /* 교차축을 센터로 정렬 */
        flex-direction: column;  /* 요소를 세로로 나열한다 */
        flex-wrap: wrap;         /* 공간이 부족해지면 줄바꿈을 한다 */
    }
</style>

그래서 왜 좋아?

div {
   display: inline;
}

위의 방법 처럼 display 속성 자체를 inline으로 바꾸는 방법도 있지만 이 방법에는 문제가 있다.

요즘은 사용자들이 다양한 기기와 다양한 해상도로 서비스를 사용하게 된다.

이때 각 기기마다의 디자인이 개발된 의도와는 다르게 보일 수 있기 때문이다.

하지만 flex 속성은 화면의 크기에 맞춰 요소들이 이동을 해주기 때문에 위의 문제가 해결된다.

개발일기

[CSS] flex속성

flex?🤑🚗💰💲🛫💶

사용법

그래서 왜 좋아?

댓글

티스토리툴바

[CSS] flex속성

flex?🤑🚗💰💲🛫💶

사용법

그래서 왜 좋아?

관련글

댓글

티스토리툴바