728x90
반응형
flex
- padding이나 margin 없이 엘리먼트의 포지션을 이동시키고 정렬할 수 있음
- 적용하고자 하는 엘리먼트의 부모 엘리먼트에만 작성해야함
| 속성 | 의미 |
| display | Flex Container를 정의 |
| flex-flow | flex-direction와 flex-wrap의 단축 속성 주축 여러줄 묶음 |
| flex-direction | Flex Items의 주 축(main-axis)을 설정 |
| flex-wrap | Flex Items의 여러 줄 묶음(줄 바꿈) 설정 |
| justify-content | 주 축(main-axis)의 정렬 방법을 설정 |
| align-content | 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
| align-items | 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) |
1) display : flex; || inline-flex;
- Flex Container를 정의
- display : flex; 일때와 display : inline-flex; 일때의 결과가 같음
<style>
.father {
width: 400px;
height: 100px;
border: 2px solid black;
display: flex;
}
.child {
width: 80px;
height: 80px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div class="father">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
2) flex-flow : flex-direction flex-wrap;
- 주축 여러줄 묶음
- flex-direction와 flex-wrap의 단축 속성
- flex-direction와 flex-wrap을 한번에 설정 가능
.father {
width: 400px;
height: 100px;
border: 2px solid black;
display: flex;
flex-flow: row-reverse wrap;
}
3) flex-direction : row; || row-reverse; || column; || column-reverse;
- 주 축(main-axis)을 설정
| 값 | 의미 | 기본값 | |
| row | Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 | row | 주 축(main-axis) - Items를 수평축으로 표시 - 주 축이 수평이며 교차 축은 수직 |
| row-reverse | Items를 row의 반대 축으로 표시 | ||
| column | Items를 수직축(위에서 아래로)으로 표시 | 교차 축(cross-axis) - Items를 수직축으로 표시 - 주 축은 수직이며 교차 축은 수평 |
|
| column-reverse | Items를 column의 반대 축으로 표시 |
- 주 축(main-axis) 과 교차 축(cross-axis)
- flex-direction: row; 일때
.father {
width: 400px;
height: 100px;
border: 2px solid black;
display: flex;
flex-direction: row;
}
- flex-direction: row-reverse; 일때
.father {
width: 400px;
height: 100px;
border: 2px solid black;
display: flex;
flex-direction: row-reverse;
}
- flex-direction: column; 일때
.father {
width: 100px;
height: 400px;
border: 2px solid black;
display: flex;
flex-direction: column;
}
- flex-direction: column-reverse; 일때
.father {
width: 100px;
height: 400px;
border: 2px solid black;
display: flex;
flex-direction: column-reverse;
}
https://heropy.blog/2018/11/24/css-flexible-box/
CSS Flex(Flexible Box) 완벽 가이드
많은 경우 float, inline-block, table 등의 도움을 받아서 수평 레이아웃을 구성하지만 이는 차선책이며, 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다. CSS F
heropy.blog
그냥 이 블로그 볼 것
728x90
반응형
'Coding With Jina > CSS' 카테고리의 다른 글
| [CSS] Padding을 제외한 배경색 지정하기 (0) | 2020.05.20 |
|---|---|
| [CSS] Flex 완벽 정리 (0) | 2020.05.17 |
| [CSS] vertical-align 수직정렬 (0) | 2020.05.14 |
| [CSS] Position & Display (0) | 2020.05.14 |
| [CSS] Box Model 쉬운 정리 (0) | 2020.05.14 |