flex 아이템 속성1
order: flex item의 순서를 지정한다. html의 구조와 상관없이 순서를 변경할 수 있다.
=> 0이 기본값, flex item에 순서를 지정하고 순서가 클수록 순서가 밀리고 음수가 허용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 아이템 속성</title>
<style type="text/css">
.container {
border: 4px solid red;
display: flex;
}
.container .item {
width: 100px;
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container .item1 {
order: 1;
}
.container .item4 {
order: 1;
}
.container .item6 {
order: -1;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>
</body>
</html>
flex 아이템 속성2
flex-grow: flex item의 증가 너비 비율을 설정한다.
=> 모든 item의 총 증가 너비에서 각 아이템의 증가 너비의 비율만큼 너비를 가질 수 있다.
=> 모든 item이 3개이고 증가 너비가 1, 2, 1이라면 각 아이템은 25%, 50%, 25%의 너비를 가진다.
=> 모든 item의 너비가 가변 너비가 아니거나 값이 0일 경우 효과가 제대로 나타나지 않는다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 아이템 속성</title>
<style type="text/css">
.container1 {
border: 4px solid red;
display: flex;
}
.container1 .item1 {
/* width: 100px; */
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
/* item2 : item3 : item 4를 1 : 2 : 1의 비율로 나타낸다. */
/* flex-grow 속성을 지정하면 item에 width 속성이 지정된 경우 정확한 비율이 반영되지 않는다. */
.container1 .item2 {
flex-grow: 1;
}
.container1 .item3 {
flex-grow: 2;
}
.container1 .item4 {
flex-grow: 1;
}
.container2 {
border: 4px solid red;
display: flex;
}
.container2 .item5 {
/* width: 100px; */
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container2 .item6 {
flex-grow: 2;
}
.container2 .item7 {
width: 100px;
}
.container2 .item8 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container1">
<div class="item1 item2">1</div>
<div class="item1 item3">2</div>
<div class="item1 item4">3</div>
</div>
<div class="container2">
<div class="item5 item6">1</div>
<div class="item5 item7">2</div>
<div class="item5 item8">3</div>
</div>
</body>
</html>
flex 아이템 속성3
flex-shrink: 모든 item의 크기의 합계보다 컨테이너 크기가 작아졌을 때 flex item들의 감소 너비 비율을 설정한다.
=> 숫자가 크면 더 만은 너비가 감소한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 아이템 속성</title>
<style type="text/css">
.container {
width: 400px;
border: 4px solid red;
display: flex;
}
.container .item {
width: 200px;
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
}
.container .item1 {
/* 컨테이너의 크기가 item 크기의 합계보다 작기때문에 item의 너비(200px)의 1/3만큼 작아진다. */
flex-shrink: 1;
}
.container .item2 {
/* 컨테이너가 작아져도 item의 크기가 변경되지 않는다. */
flex-shrink: 0;
}
.container .item3 {
/* 컨테이너의 크기가 item 크기의 합계보다 작기때문에 item의 너비(200px)의 2/3만큼 작아진다. */
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">Good job!</div>
<div class="item item2">A</div>
<div class="item item3">Hello world</div>
</div>
</body>
</html>
flex 아이템 속성4
flex-basis: flex item의 공간 분배 전 기본 너비를 설정한다.
flex-basis: auto; 기본값
flex-basis의 크기를 지정하면 지정된 크기보다 표시할 가장 긴 단어의 크기가 크면 단어의 크기에 item의
크기가 맞춰지고 지정된 크기보다 단어의 크기가 작으면 지정된 크기로 아이템의 크기가 맞춰진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 아이템 속성</title>
<style type="text/css">
/*
flex-basis: flex item의 공간 분배 전 기본 너비를 설정한다.
*/
.container1 {
border: 4px solid red;
display: flex;
}
.container1 .item1 {
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
/* width이 지정되고 flex-grow가 1이면 item의 크기가 데이터의 크기와 상관없이 모두 같은 크기를 가진다. */
width: 100px;
flex-grow: 1;
}
.container2 {
border: 4px solid red;
display: flex;
}
.container2 .item2 {
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
/* width이 지정되지않고 flex-grow가 1이면 item의 크기가 데이터의 크기를 제외한 공간이 모두 같은 크기를 가진다. */
/* width: 100px; */
flex-grow: 1;
}
.container3 {
border: 4px solid red;
display: flex;
}
.container3 .item3 {
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
/* flex-basis: auto;로 설정하면 위의 container2와 똑같이 표현된다. */
flex-basis: 200px;
}
</style>
</head>
<body>
<div class="container1">
<div class="item1">GoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGood job!!</div>
<div class="item1">A</div>
<div class="item1">Hello worldHello worldHello world</div>
</div>
<div class="container2">
<div class="item2">GoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGood job!!</div>
<div class="item2">A</div>
<div class="item2">Hello worldHello worldHello world</div>
</div>
<div class="container3">
<div class="item3">GoodGood GoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGoodGood job!!</div>
<div class="item3">A</div>
<div class="item3">Hello world Hello world Hello world Hello world Hello world</div>
</div>
</body>
</html>
flex 아이템 속성5
align-self: 교차 축에서 item 정렬 방식을 지정한다.
flex 컨테이너 속성 중에 align-items는 컨테이너 내부의 모든 item을 일괄적으로 정렬 방식을 설정했었다.
모든 item을 일괄적으로 정렬하지 않고 일부 item만 정렬 방식을 변경해야 한다면 align-self를 사용한다.
align-self는 align-items 보다 우선권을 가진다.
=> auto: 기본값, 컨테이너 속성인 align-items를 상속받는다.
=> stretch: 컨테이너 교축을 가득 채우기 위해 item을 늘린다. height: auto;로 지정해야 효과가 나타난다.
=> flex-start: item을 시작점으로 정렬한다.
=> flex-end: item을 끝점으로 정렬한다.
=> baseline: item을 문자 기준선에 맞춘다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex 아이템 속성</title>
<style type="text/css">
.container {
height: 400px;
border: 4px solid red;
display: flex;
align-items: flex-end;
}
.container .item {
width: 100px;
height: 100px;
border: 4px solid blue;
border-radius: 10px;
background-color: skyblue;
}
.container .item2, .container .item7 {
align-self: flex-start;
}
.container .item1, .container .item8 {
height: auto;
align-self: stretch;
}
.container .item3, .container .item5 {
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
<div class="item item7">7</div>
<div class="item item8">8</div>
</div>
</body>
</html>
