# flex grow

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

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

[CSS]Flex의 기본값과 활용
flex-shrinkflex에서 아이템은 width값을 주어도, 화면이 줄어들면 width를 무시하고 줄어든다.브라우저 가로 길이를 줄이면 박스가 알아서 줄어드는 것을 확인할 수 있다.이는 flex-shink의 기본값이 '1' 줆어듦이기 때문이다.크기를 유지하고 싶을
남은영역 height 가득 채우고싶을때
https://stackoverflow.com/questions/50043803/how-to-make-an-element-fill-the-remaining-viewport-height
[CSS] flex 레이아웃 2-11
웹 사이트의 구조를 영리하게 짤 수 있다.display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 된다.inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다.flex-direction의 값row(가로로 왼쪽부터)column(세로
flex & flex-basis & flex-grow & flex-shrink
부모 요소의 크기 변화에 따라 자식 요소들의 크기를 조절하고 싶을 때 쓰는 속성.flex-basis의 default값은 auto.(컨테이너의 크기가 변화해도 요소들의 크기가 변하지 않음)width, height 속성이 밑에있음에도, flex-basis: 300px이 우

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

[웹사이트] flex-grow, flex-shrink, flex-basis
flex는 레이아웃 방식요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공한다. 단위가 없으면 flex-grow 값이 된다.단위가 있으면 flex-basis 값이 된다. 첫번째 값은 단위가 없는 숫자여야 한다. 또한, 첫번째 같
Flexbox
flexbox = Flexible Box Moduleflexbox 내의 아이템 간의 공간 배분과, 정렬 기능을 제공하는 레이아웃 모델레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다. = 1차원 모델display: flex 부모 박스 요소에 적용해, 자
[Css]flex-order,flex-grow,flex-shrink,flex-basis
플렉스 또는 그리드 컨테이너안에서 현재 요소의 배치를 순서를 지정참고논리적인 순서나 탭 순서와는 상관 없이 화면에 보이는 순서에만 영향item들의 값은 0이기때문에 1을 넣으면 맨 오른쪽으로 이동 왼쪽으로 이동 시에는 -를 사용\-flex-item요소가, flex-co

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

[KDT]FCFE - 3주2일 - 2. 웹페이지 만들기 4 ( flex )
하나의 div에 3개의 버튼 만들어 넣기width를 가진 버튼그룹 div를 만들고버튼그룹인 div에 display:flex; 를 주고flex-wrap: wrap;: 줄이 넘어가면 줄 바꿈하여 배치함.을 설정한다.버튼을 크기를 조정하여 2개는 윗줄에 한개는 아랫줄에 오게

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

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