[CSS] flex 기초

flex 기초 1

 

<div class="contents">

  <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>

 

div.contents{

  background-color: coral;

  display: flex;

  flex-direction: row;

  height: 500px;

  

  .item{

    background-color: red;

    flex-basis: 50px;

    

  }

}

 

 

 

display: flex

자식 요소를 flex하게 다루겠다.

 

 

flex-grow: 1;

화면의 나머지 공간을 특정비율로 가져가겠다.

 

flex-shrink: 1;

부모가 줄어드는 상황에서도 너비를 얼마나 유지하는가

높을수록 빨리 줄어들음

 

flex-direction: row, column

가로배열, 세로배열

 

flex-basis: 높이 혹은 너비

 

 

 

 

flex 기초 2

 

 

<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>

 

 

body{

  display: flex;

  justify-content: space-between;

//  줄 안에서의 수직 정렬

  flex-direction: row;

  align-items: center;

  //   줄 단위 수직 정렬

  

  align-content: center;

 

  flex-wrap: wrap;

//   줄바꿈

  

  margin: 0;

  min-height: 200vh;

}

 

div.item{

  background-color: green;

}

 

 

container 부모 요소

 

flex-direction: 아이템이 흐르는 방향, 가로축, 세로축

flex-wrap: 아이템의 줄바꿈 여부

align-items: 수직, 줄 단위 정렬(한 줄 안에서의 수직 정렬)

justify-content: 줄 안에서의 정렬(text-align)

 

 

item 자식 요소

 

align-self: 특정 아이템 하나만 정렬

flex-grow: 나머지 공간에 대한 n분의 1을 너비로 갖겠다.

flex-shrink: 도덕성, 너비가 줄어드는 정도

flex-basis: 너비가 100%, flex-grow가 우선권이 더 세다.

order: 순서 변경

align-content: 줄들간의 수직 정렬