로딩
요청 처리 중입니다...

[CSS] CSS Flex (Flexbox)

[CSS] CSS Flex (Flexbox)

1. flexbox 사용 이유 flexbox란 화면의 크기가 동적으로 변할 때에도 효율적으로 요소를 배치할 수 있게 해주는 css3의 레이아웃 방식이다. 사용하는 이유를 확실하게 보고 가자.

아래와 같은 박스들이 있다고 해보자. 이를 flexbox 없이 같은 간격으로 나눈다고 해보자.

아래와 같이 margin-left를 사용하여 잘 나눴다. .p1 { height: 500px; } .c1 { width: 300px; height: 300px; background-color: yellow; border: 1px solid black; display: inline-block; } .c1:nth-child(2) { margin-left: 250px; } .c1:nth-child(3) { margin-left: 250px; } 얼핏 보기에는 잘 나눈 것 같지만, 사실 여기에는 큰 문제가 하나 있다. 작업하고있는 내 컴퓨터 안에서만 이렇게 보인다는 점이다.

픽셀로 margin-left를 준 ...

# alignself # flexwrap # flexbox란 # flexboxorder # flexboxmainaxis # flexboxjustifycontent # flexboxflexwrap # flexboxflexgrow # flexboxcrossaxis # flexboxalignself # flexbox # cssflexbox # cssflex # justifycontent

원문 링크 : [CSS] CSS Flex (Flexbox)

등록된 다른 글

[프로그래머스] 체육복(JavaScript)
[프로그래머스] 체육복(JavaScript)
[Node.js] setTimeout(), setImmediate(), process.nextTick()의 차이점
[Node.js] setTimeout(), setImmediate(), process.nextTick()의 차이점
[프로그래머스] 짝지어 제거하기(JavaScript)
[프로그래머스] 짝지어 제거하기(JavaScript)
[프로그래머스] 위클리 챌린지 8주차_최소 직사각형(JavaScript)
[프로그래머스] 위클리 챌린지 8주차_최소 직사각형(JavaScript)
[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)
[JavaScript] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)
[React 오류] expected a string (for built-in components) or a class/function... 오류 해결
[React 오류] expected a string (for built-in components) or a class/function... 오류 해결