CSS FlexBox

천권희·2023년 7월 7일
0

CSS

목록 보기
1/4

CSS 자동완성

postcss extension을 꺼주고

select language mode를 css로 변경한다

display 속성과 flexbox 필요성


https://www.daleseo.com/css-display-inline-block/

inline(좁게) : span, a
block(넓게) : div, h1, p
inline-block(기본은 좁게, 조절 가능) : button, input

px 단위의 디자인 -.> 모두 다른 screen에 대해 디자인을 유지할 수 없다.
=> flexbox -> grid


first rule of flex box & axis

first rule : flexbox에서 element를 움직이고 싶을 때 => flexbox container를 만들어야 한다.
(inline-box의 weired margin이 사라짐)

main axis 방향으로 item을 옮길 때는 'justify-content'
cross axis 방향으로 item을 옮길 때는 'align-items'

원하는대로 위치이동이 안될 때는 flex-father의 크기 확인 (height 설정!!)

html,
body {
  height: 100%; // height 설정
}

.wrapper {
  height: 100%; // height 설정
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
}

or

.wrapper {
  height: 100vh; // height 설정
  display: flex;
  justify-content: space-around;
  align-items: center; 
}

.box {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
}

Child에게 줄 수 있는 유일한 property

align-self : father의 flexbox에 대해서 자신의 위치 설정 (cross-axis)
적용 순위 - align-self > align-items

order : html을 건들지 않고 flexbox 안의 요소들에 대한 순서를 바꿀 수 있다.
기본 order는 0으로 설정


Element가 많아지는 경우 (wrap, align-content)

flexbox는 item들이 모두 같은 줄에 있도록 유지함

flex-wrap : wrap -> respect the size of children

align-content : 행간 공백 결정 (cross-axis)
-item => element 위치 결정
-content => element들 간의 간격 결정


Useful to Responsive Design

child에게 줄 수 있는 property 두번째

flex-shirink : flexbox가 squeeze될 때 element의 행동을 정의 할 수 있다. (어떤 element가 더 찌그러질지)
default = 1

flex-grow : flexbox가 여유 공간이 있을 때 해당 element가 남아있는 빈공간을 가져가 크게 만들 수 있다.
default = 0

.box:nth-child(2) {
  flex-grow: 2;  // 남아있는 공간 2/3 가져감
}

.box:nth-child(3) {
  flex-grow: 1;  // 남아있는 공간 1/3 가져감

flex-item 크기 설정

child에게 줄 수 있는 property 세번째

flex-basis => gie initial size
main-axis 쪽 크기(width) before grow or shirink



flexbox tutorial game : https://flexboxfroggy.com/#ko

profile
Newbie

0개의 댓글