<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
display: flex;
height: 100px;
border: 1px solid orange;
/* align-items: stretch; 기본값 */
align-items: center;
/* jusify-content */
justify-content: space-between;
}
button{
width: 15%;
line-height: 1.5;
}
#one{
align-self: flex-start;
order: -4;
}
#two{
align-self:flex-end;
order: 3;
}
#three{
align-self:center;
}
#four{
align-self:stretch;
}
</style>
</head>
<body>
<!--
! 1. alignt-items
: item들이 교차축(주축의 90도 방향)에서의 배치를 결정
- stretch(기본값) /center(중앙) / flex-start / flex-end / baseline
! 2. align-self
: "지정 item"의 "교차축"에서의 배치를 결정
>>align-items의 속성값과 동일
? 3. justify-content
: "item들"이 "주축"에서의 배치를 결정
- flex-start/ flex-end/ center/ space-around/ space-between
* 4. order
: flex item 순서 지정(기본값 0)
-order값이 클 수록 나중에 나타남
-순위값이 동등한 항목은 소스 코드 순서로 나타남
-음수 지정 가능
-->
<div>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">5</button>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
| CSS 활용예시(transition, @media) (0) | 2024.07.30 |
|---|---|
| CSS 활용예시(transition) (0) | 2024.07.30 |
| CSS 활용예시(flex02★) (0) | 2024.07.29 |
| CSS 활용예시(flex01★) (0) | 2024.07.29 |
| HTML, CSS 연습 문제 (0) | 2024.07.29 |