# flex-basis

ssarr_i

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

judevv604

코드스테이츠 프론트엔드 개발자 부트캠프 45기 5일차

yeonn

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

garcon

flex-basis 속성을 완전히 이해하고 있다고 생각했는데 `flex-basis: auto`와 and `flex-basis: 0`의 차이점이 무엇이냐는 질문에 대답하지 못했다. 처음부터 차근차근 나의 언어로 정리할 필요성이 있는 것 같아 글을 쓴다.

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 부모 박스 요소에 적용해, 자

rondido

플렉스 또는 그리드 컨테이너안에서 현재 요소의 배치를 순서를 지정참고논리적인 순서나 탭 순서와는 상관 없이 화면에 보이는 순서에만 영향item들의 값은 0이기때문에 1을 넣으면 맨 오른쪽으로 이동 왼쪽으로 이동 시에는 -를 사용\-flex-item요소가, flex-co

uhye

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

e_ong

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

sweetpumpkin

🦁 Day15 💻 오늘 배운 것 transform-style: preserve-3d 상속되는 속성이 아니다. 각 요소에 모두 써줘야한다. 면접 대비를 위한 코딩습관 코딩할 때 왜 그렇게 짰는지 왜 그 선택을 했는지 항상 생각하면서 코딩하는 습관을 들이자. >

cptkuk91

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

songjy377

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

bandor

flex-basis.MDN에서 flex-basis를 다음과 같이 정의하고 있다.flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다.display: flex 특성 상, content의 width가 viewport 보다 크면 width를 따르지 않고