# flex-shrink

ssarr_i

Flex Item의 크기를 설정한다.이 때, flex-direction:row인 경우에는 아이템의 좌우 너비가 변하고, flex-direction:column;인 경우에는 아이템의 높이가 변한다.남는 행 여백을 분배하여 채우는 속성flex-grow를 사용하면 부모 요소

yeonn

01 Flexbox (Flexible Box Module) > flex-direction: row / column; flexbox에서 레이아웃의 방향을 결정하는 속성이다. row가 기본값이며 메인축 즉, 가로축 방향을 설정하고 왼쪽에서 오른쪽으로 item이 정렬된

tnsdlznf23

flex-shrinkflex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다.브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다.이는 flex-shink의 기본값이 '1' 줆어듦이기 때문이다.크기를 유지하고 싶을

mike7643

웹 사이트의 구조를 영리하게 짤 수 있다.display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 된다.inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다.flex-direction의 값row(가로로 왼쪽부터)column(세로

s_honey1122

부모 요소의 크기 변화에 따라 자식 요소들의 크기를 조절하고 싶을 때 쓰는 속성.flex-basis의 default값은 auto.(컨테이너의 크기가 변화해도 요소들의 크기가 변하지 않음)width, height 속성이 밑에있음에도, flex-basis: 300px이 우

honey1122

부모 요소의 크기 변화에 따라 자식 요소들의 크기를 조절하고 싶을 때 쓰는 속성.flex-basis의 default값은 auto.(컨테이너의 크기가 변화해도 요소들의 크기가 변하지 않음)width, height 속성이 밑에있음에도, flex-basis: 300px이 우

youjin0411

flex는 레이아웃 방식요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다. 단위가 없으면 flex-grow 값이 된다.단위가 있으면 flex-basis 값이 된다. 첫번째 값은 단위가 없는 숫자여야 한다. 또한, 첫번째 같

wlwl99

flexbox = Flexible Box Moduleflexbox 내의 아이템 간의 공간 배분과, 정렬 기능을 제공하는 레이아웃 모델레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다. = 1차원 모델display: flex 부모 박스 요소에 적용해, 자

uhye

단일 축을 이용하여 요소를 배치하는 flex 속성 알아보기

e_ong

flex는 flex-grow, flex-shrink, flex-basis의 단축 속성! ⭐️ 참고사이트이 3가지 속성은 따로 쓰지 않고, 대체로 flex 단축 속성으로 작성한다.flex container의 남은 너비를 flex item들이 어떻게 나눠가질 것인지를 지

cptkuk91

HTML 구성하기 대부분 좌에서 우, 위에서 아래로 진행합니다. CSS 화면 구분 시 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다. 수직분할 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치합니다. 수평분할

songjy377

flex-direction, flex-wrap,justify-content align-items 같은 flex-box요소들과, flex-grow, flex-basis, align-self 같은 flex-item요소들에 대해 다룬다.

parkoon

flex-shrink 의 계산은 flex-basis, width, height 의 영향을 받기 때문에 여간 까다로운 일이 아니다. 실무에서는 많이 사용해보진 않았지만, 계산법은 알고 있어야 할 것 같아 정리 해본다.위 그림은 flex-basis의 값이 각각 100px