display : flexbox 란?
박스와 아이템들을 행 또는 열로 자유자재로 배치 시켜주는 css
너무 유연해서 flexbox라고 불린다~ 그만큼 쉽게 박스안에 아이템을 정렬하는게 가능하다.
예전에는 모든 브라우저에서 호환이 가능했던 태그들은 position, float, table 을 이용해서 레이아웃을 구성하곤 했었다. -> 동일한 높이 간격을 맞추는게 까다로웠다
그 전에 float 관련해서 알아보자면,
float -> 이미지와 텍스트를 어떻게 배치할 건지 정의하기 위해 나타난 태그
ex) float:left; float:rightl; float:center
본격적으로 flexbox에 대해 알아보자
1.
container에 들어가는 속성값들은 아래와 같다.
| display | flex-dircetion | flex-wrap | flex-flow | justify-content |
| align-items | align-content |
item에 들어가는 속성값들은 아래와 같다
| order | flex-grow | flex-shrink | flex | align-self |
main axis (중심축)
cross axis (반대축)
이번 실습은 jsbin.com 에서 진행
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</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 class="item item9">9</div>
<div class="item item10">10</div>
</div>
</body>
</html>body, html{
height:100%
}
.container{
background:beige;
height:100vh;
display:flex;
}
.item{
width:40px;
height:40px;
}
.item1{
background:#fe9a9a;
}
.item2{
background:#fe9234;
}
.item3{
background:#a9a;
}
.item4{
background:#3434;
}
.item5{
background:#a5659a;
}
.item6{
background:#e9a9a;
}
.item7{
background:#ffff9a;
}
.item8{
background:#ddda9a;
}
.item9{
background:#ffdfda9a;
}
.item10{
background:#fe9a9a;
}결과 값(container에 flex를 주면 정렬 스타트!)
- flex-direction : row(기본값 왼->오 방향) / row-reverse (오-왼) / column (위-아래) /column-reverse(아래-위)
- flex-wrap : nowrap / wrap(아이템이 꽉 차게 되면 다음라인으로 자동으로 내려감) / reverse 존재
- flex-flow = flex-direction + flex-wrap -> 한번에 작성 가능 ex) flex-flow : column nowrap;(위 아래로 꽉 차게)
-justify-content(아이템들을 어떻게 배치할건지 결정 해줌) : flex-start / flex-end(오른쪽정렬로 배치, 순서는 유지)
여기서 차이점은,
flex-direction : column-reverse 는 아래에서 부터 거꾸로 카운트,
justify-content : flex-end 는 위에서 부터 차례로 카운트 된다.
justify-content: space-around -> 해상도에 맞춰 라운드로 여백을 준다.(양쪽공간은 작음)
justify-content: space-evenly -> 똑같은 간격을 넣어줌
justify-content: space-between ->양 옆은 화면에 맞게 하고 배치 중간에만 아이템을 넣어줌
이제 부턴 부모에서 세로 기준 중앙 정렬로 아이템을 배치하고 싶을 때 쓰는 속성 값들이다.(수직 중심)
justify-content 는 중심축에서 아이템들을 배치하고,
align은 반대축에서 어떻게 할 건지 결정한다.
- align-items : center
align-items: baseline -> 동일하게 배치시켜줌
jsutify-content는 중심축에서 아이템들을 배치한다면, align-content는 반대축에서 아이템을 지정하게 된다.
참고 사이트
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
A Complete Guide to Flexbox | CSS-Tricks
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes hi
css-tricks.com
그 외
- flex-shrink: 1 ->기본값은 0 컨테이너의 사이즈가 줄었을 때 얼마나 어떻게 줄어드는지 지정 할 수 있다.
-flex-basis : 60% -> 넓이값을 지정해줄 수 있다. 컨테이너 width에 따라서 움직인다.
-align-self : center -> 아이템 별로 따로따로 배치가 가능하다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
flex를 연습 할 수 있는 게임
'퍼블리싱 > css' 카테고리의 다른 글
| display:gird 기초에 대해 알아보자 (0) | 2023.08.17 |
|---|---|
| transform, transition 그리고 벤더프리픽스란? (0) | 2023.02.27 |
| 이미지 그레이 필터 적용 후 hover했을때 해제 (0) | 2022.02.08 |
| 12가지 햄버거메뉴 종류 (0) | 2022.02.08 |
| css-flexbox (0) | 2022.01.18 |
