요즘 들어 회사 프로젝트에서 크로스 브라우징을 IE11 이상으로 맞추는걸로 진행되고 있다.
너무 좋다^*^//
display: flex 는 기존의 display: inline-block과 float:left의 장점을 섞은 아주 좋은 css다.
꾸준히 써보면서 내 것으로 만들어야지.
{
display : flex;
(가로 정렬)
justift-content :
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.(처음과 끝이 맨 왼쪽, 오른쪽에 붙는다.)
space-around: 요소들 주위에 동일한 간격을 둡니다.
}
{
display : flex;
(세로 정렬)
align-items :
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
}
{
display : flex;
flex-wrap: wrap;
(여러 줄 사이의 간격을 지정. 한 줄만 있는 경우, 이 속성은 효과가 없다.)
align-content :
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
}
{
display : flex;
(방향 지정)
flex-direction :
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
}
{
display : flex;
(줄 정렬)
flex-wrap :
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
}
{
display : flex;
(줄 정렬)
flex-flow :
column wrap
// flex-direction과 flex-wrap을 한번에 사용
}
{
// 부모
display:flex;
}
{
// 특정 자식
order : -1, 0, 1 ; // 기본값은 0이며, 양수나 음수로 위치 변경
}
{
// 부모
display:flex;
align-items: flex-start;
}
{
// 특정 자식
( align-self는 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다. )
align-self : flex-end;
}
'Web > Styles' 카테고리의 다른 글
| [CSS] 웹페이지 프린트 설정 (1) | 2020.05.18 |
|---|---|
| [CSS] footer 하단에 고정 시키기 (0) | 2020.05.13 |
| [CSS] CSS Framework 종류 (0) | 2020.01.02 |
| [CSS3] display: flex 정리 (0) | 2019.11.26 |
| [CSS] 기기별 미디어쿼리 (0) | 2019.09.10 |