[css] display flex 크로스브라우징

display: flex;를 많이 사용 하는 추세인데 이에 맞게 크로스브라우징을 해야한다.

가급적이면 display: table;이나 float: left;를 사용하려 하지만 display: flex;가 주는 스타일의 간편함 때문에 계속 찾게 되는 것 같다.

 

아래는 기본적으로 flex할 대상의 부모에게 flex 해주는 스타일이다.

ul {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
}

flex 대상의 각각의 높이가 다른 정렬 

- top으로 하기

li {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

- center로 하기

li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

- bottom으로 하기

li {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}