# Flex
.png?w=768)
[CSS 기초] Flex
라고 하면 div(block 요소)기 때문에 수직 정렬을 하게 된다. 수평 정렬을 하고 싶다면? 요소를 주면 수평으로 정렬된 것 같이 보이지만, 요소들간의 간격으로 인해 여백이 존재한다. (개행이 있으면 여백이 생긴다.) 하면 둥둥 부유하게 되어서 수평으로 잘 된
[CSS] Layout(display, visibility, float, position, overflow, z-index)
Layout을 이루는 box, inline 요소들의 display, visibility, float, position, overflow, z-index에 대해 다룬다.
[TIL] Day-31
flex는 x축 또는 y축의 1차원 방향을 제어할 수 있다. 사용 가능한 속성들은 크게 flex-container와 flex-item을 기준으로 나뉜다. *속성들의 기본 값을 파악하고 있는 것이 중요함. flex-container 1. display: flex /
[TIL] Flex vs Grid
Flex와 Grid, 모두 CSS에 있는 속성으로 웹 페이지의 레이아웃을 잡는데 사용된다. 그러나 두 속성의 차이를 잘 이해하지 못하면 어떤 속성을 써야 할지 헤깔리는 경우도 있고, 하나의 속성에 대해서만 학습하여 그 속성만 활용하는 경우도 있다.쉽게 말하자면 둘의 차
Flex 사용하기 Layout with Flexbox (react-native)
하나의 플렉스 아이템이 자신이 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성즉, 사용 가능한 공간을 어떻게 채울 방법을 정의한다.각 요소의 flex 속성에 따라 공간이 분할된다.하나의 div안에서 flex가 여러개 정의되는 경우 공
Flex 핵심정리 - 유연한 박스
flex-basis 는 Flex 아이템들의 기본 크기를 설정한다.(flex-direction이 row일때는 너비, column 일때는 높이)flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. flex-grow에는 숫자값이 들어
Flex 핵심정리 - 전체 아이템 정렬
"justify" 는 메인축 (main-axis) 방향으로 정렬."align" 은 수직축 (cross-axis) 방향으로 정렬.justify-content 는 메인축 방향으로 아이템들을 정렬하는 속성이다.align-items 는 수직축 방향으로 아이템들을 정렬하는 속성
Flex핵심정리 - 배치의 흐름
부모 요소인 div.container를 Flex Container 라고 부르고,자식 요소인 div.item 들을 Flex Item 이라고 부른다."컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 배치되는것" 이다.Flex의 속성들
Flex 시작하기
"Grid가 나온 이상, Flex는 구시대의 유물일 뿐이다."나는 아니라고 생각한다. 더 나중에 나온 스펙인 Grid로도 Flex와 똑같이 구현할 수 있는 경우가 많지만, Grid로는 구현이 어려운 레이아웃이거나 Flex를 쓰는게 더 편리한 경우도 있다. 그리고 마소가
Day.26 CSS 심화(2021.09.06)
flex-startflex-endspace-evenlyspace-betweenspace-aroundflex-startflex-endstretch ( 높이가 auto일 경우에만 동작)baseline ( 글자 기준으로 정렬)center ( 가운데 정렬)wrapnowrapw
[TIL] CSS - Float, Flex, Grid
border의 색상을 지정하지 않으면 글자색에 따라 색상이 결정된다floatfloat 옵션을 끝내는 지점에서 별도의 해제 작업이 필요하다방법1다만 위와 같은 방식은 쓰지도 않을 dom을 일부러 생성해야 한다는 단점이 있다.방법2방법3after라는 가상 요소를 통해 3번
display: flex 속성에 대해 알아보자!
display: flex는 우리가 레이아웃을 더 쉽게 잡을 수 있도록 도와준다.display는 container와 item으로 이루어지는데, item을 감싸는 container에 들어가는 속성과 item에 들어가는 속성이 따로 존재한다.main-axis와, cross
Weekly I Learned(1주차) 이번주는 개구리랑 Flex 해버렸지 뭐야~?
✔ flex는 무엇인가? 🚩 정의의 사도 MDN 형님 曰 > CSS 속성 flex는 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 라고 MDN형님은 설명을 해주셨다. 나는 앞서 포스팅
📒TIL)CSS Flex 속성
오늘은 레이아웃을 다룰때 많이 쓰는 felx , justify-content, align-items, flex-direction, order, align-self, flex-wrap, align-content을 알아 볼려고 합니다 flex는 요소의 크기가 불분명하거나