한 걸음씩
[Web] Flexible box for CSS layout 본문
1. 개요
► CSS Flexbox
- 요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식
- 요소 간 '공간 배열'과 '정렬'
- main axis
- flex item들이 배치되는 기본 축 (가로 아님)
- main start에서 시작하여 main end방향으로 배치
- cross axis
- main axis에 수직인 축 (세로 아님)
- cross start에서 시작하여 cross end 방향으로 배치
- Flex Container
- display: flex; 혹은 display: inline-flex; 가 설정된 부모 요소
- 이 컨테이너의 1차 자식 요소들이 Flex item이 됨
- flexbox 속성 값들을 사용하여 자시기 요소 Flex Item들을 배치
- Flex Item
- Flex Container 내부에 레이아웃 되는 항목
2. Flexbox 레이아웃 구성
► Flexbox 속성
- Flex Container 관련 속성
- display, 배치[flex-direction, flex-wrap], 공간 분배[justify-content, align-content], 정렬[align-items]
- Flex Item 관련 속성
- oalign-self, flex-grow, flex-shrink, flex-basis, order
► Flexbox Tip
| justify | align |
| 주축 | 교차 축 |
① Flex Container
- flex item은 행으로 나열
- flex item은 주축의 시작 선에서 시작
- flex item은 교차축의 크기를 채우기 위해 늘어남
<style>
.container {
height: 500px;
border: 1px solid black;
display: flex; <!-- 이 부분 참고 -->
}
.post {
background-color: grey;
border: 1px solid black;
margin: 0.5rem;
padding: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="post item1">box1</div>
<div class="post item2">box2</div>
<div class="post">box3</div>
<div class="post">box4</div>
</div>
</body>
② flex-direction
- column은 주 축이 변경됨
- reverse는 시작 선과 끝 선이 서로 바뀜
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
flex-direction - CSS: Cascading Style Sheets | MDN
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
developer.mozilla.org
③ flex-wrap
- 화면 너비를 조절하면 다른 행에 배치할지 여부 설정
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
flex-wrap - CSS: Cascading Style Sheets | MDN
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
developer.mozilla.org
④ justify-content
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
justify-content - CSS: Cascading Style Sheets | MDN
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
developer.mozilla.org
⑤ align-content
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
align-content - CSS: Cascading Style Sheets | MDN
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
developer.mozilla.org
⑥ align-items
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
align-items - CSS: Cascading Style Sheets | MDN
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
developer.mozilla.org
⑦ align-self
https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
align-self - CSS: Cascading Style Sheets | MDN
The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
developer.mozilla.org
⑧ flex-grow
https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow
flex-grow - CSS: Cascading Style Sheets | MDN
flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-conta
developer.mozilla.org
⑨ flex-basis
https://developer.mozilla.org/ko/docs/Web/CSS/flex-basis
flex-basis - CSS: Cascading Style Sheets | MDN
flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.
developer.mozilla.org
3. Flexbox 반응형 레이아웃
- flex-wrap을 사용해 반응형 레이아웃 작성
- feat. flex-grow & flex-basis
► 참고자료
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox
Flexbox | MDN
flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN
일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능
developer.mozilla.org
► Flexbox Game
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
'Web' 카테고리의 다른 글
| [Web] Fundamentals of Bootstrap (0) | 2023.03.06 |
|---|---|
| [Web] Semantic Web (0) | 2023.03.02 |
| [Web] Floating for CSS layout (0) | 2023.02.28 |
| [Web] Positioning for CSS layout (0) | 2023.02.27 |
| [Web] The box model (0) | 2023.02.23 |
