display : flex;
elements를 정렬하는데 사용된다. 기존의 table 태그로 정렬하면 불편한 것이 많았기에 개발된 것.
flex를 사용하기 위해서는 태그가 두단계가 필요하다. ex) ul과 li 처럼
<container>
<item></item>
<item></item>
</container>| container에 부여할 수 있는 속성 | item에 부여할 수 있는 속성 |
|
display flex-direction flex-wrap flex-flow justify-content align-items align-content |
order flex-grow flex-shrink flex-basis flex align-self |
flex의 기본
부모 자식간의 element 구조
부모 element의 display: flex;
<head>
<style>
.container{
background-color: powderblue;
height:200px;
display:flex; /* 기본적으로 flex-direction으로 정해진 방향의 화면 전체를 사용한다. */
flex-direction:row; /* 기본값 default row이고, row-reverse, column, column-reverse가 있음. 부모 element의 시작 지점을 바꾼다. */
}
.item{
background-color: tomato;
color:white;
border:1px 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 부모 element 속성
flex-direction : 부모 element의 시작 지점을 바꾼다.
flex-direction : row-reverse
flex-direction : column-reverse
기본적으로 flex-direction으로 정해진 방향으로 화면 전체를 사용한다.
align-items : (flex-direction이 row일 때) item들을 수직으로 정렬한다. flex-start(item을 content 크기로 위에 붙임), flex-end, center, stretch(부모 element 크기에 맞춰 쫙 편다), baseline
justify-content : (flex-direction의 방향을 기준으로) item들을 수평방향으로 정렬한다. flex-start, flex-end, space-between, center, space-around
flex 자식 element 속성
align-self : 자식들 중 하나만 수직 방향의 다른 배치로 둘 수 있음.
auto, flex-start, flex-end, center, baseline, stretch
flex-basis : item의 기본 사이즈를 정한다.
flex-grow : 부모 element의 여백을 자식 element들이 나눠가질 수 있다.
ex) items이 5개 있는데 모두 flex-grow가 1이면 공평하게 나눠갖는다.
items이 5개 인데 하나만 flex-grow가 3이고 나머지는 1이라면 3/7, 1/7, 1/7, 1/7, 1/7 사이즈로 나눠 갖는다.
<html>
<head>
<style>
.container{
width: 400px;
background-color: powderblue;
height:200px;
display:flex;
flex-direction:row;
}
.item{
background-color: blueviolet;
color:white;
border:1px solid white;
flex-grow: 1; /* item들이 부모 element의 여백을 공평하게 나눠서 차지한다. default 0 */
}
.item:nth-child(2){
flex-grow: 5; /* 부모 element의 5/9을 차지한다. flex-grow의 총합이 9 */
}
</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-shrink : 화면의 사이즈가 줄어들 때, items가 같이 줄어드는 정도를 설정한다. default 1
<html>
<head>
<style>
.container{
background-color: powderblue;
height:200px;
display:flex;
flex-direction:row;
}
.item{
background-color: violet;
color:white;
border:1px solid white;
flex-basis: 200px;
flex-shrink: 0;
}
.item:nth-child(1){
background-color: red;
flex-shrink: 1;
}
.item:nth-child(2){
background-color: blue;
flex-shrink: 2; /* flex-shrink의 총 합이 3이기 때문에 item1은 1/3만큼 줄어들고, item2는 2/3만큼 더 많이 줄어든다. */
}
</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>
order : items의 순서를 바꿀수 있다. default 0
각 item들에 order를 -1, 0, 1, 2, …. 로 주면 코드 상으로 앞에 있는 element를 화면상에서 순서를 바꿔서 보여줄 수 있다.
<html>
<head>
<style>
.container{
background-color: powderblue;
height:200px;
display:flex;
flex-direction:row;
}
.item{
background-color: violet;
color:white;
border:1px solid white;
flex-basis: 200px;
}
.item:nth-child(1){
background-color: red;
order: 1;
}
.item:nth-child(2){
background-color: blue;
order: -1;
}
.item:nth-child(3){
order: 2;
}
</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>
'개발 관련 지식 > CSS' 카테고리의 다른 글
| CSS - float (0) | 2020.03.13 |
|---|---|
| CSS - 미디어쿼리 (0) | 2020.03.12 |
| CSS - position : static, relative, absolute, fixed (0) | 2020.03.12 |
| 마진 겹침 현상(margin-collapsing) (0) | 2020.03.12 |
| CSS - box-sizing (0) | 2020.03.11 |
