# display: flex;

jswtncapetnc

자주 헷갈리는 Flex 정리하기 Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. 부모 박스 요소에 적용해, 자식 박스의 크기와 방향을 결정하는 방식입니다. 1. display: flex 먼저 display: flex 속성만 지정했을 때 어떻게 되는지 알아보겠습니다. flex를 지정하기 전, 박스가 가로로 전체 너비를 차지하게 됩니다. flex를 지정하게 되면, 박스가 해당 콘텐츠 너비만큼만 차지하게 됩니다. 2. flex-direc

ohmy0418

레이아웃 배치 기능을 구현할 수 있는 스타일로 기본 축과 교차 축에 따라 요소를 배치한다. flex를 선언하는 상위 부모는 flex container, 하위 요소들은 flex item이라고 불립니다. 뷰포트 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치 할 수 있다. flex-container display: flex / display: inline-flex flex / inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성으로, 자식 요소는 자동으로 flex item이 된다. flex-direction

wlwl99

flexbox의 기본 개념 flexbox = Flexible Box Module flexbox 내의 아이템 간의 공간 배분과, 정렬 기능을 제공하는 레이아웃 모델 레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다. = 1차원 모델 container & items flex container : 부모 요소 flex items : 자식 요소 container와 items에 적용하는 속성이 구분되어 있다. container : display flex-direction flex-wrap flex-flow justify-content align items items : flex order align-self [flexbox MDN](https://developer.mozilla.org/ko/docs/Web/CSS/CSSFlexibleBox_Layout

sjmh0507

01. block 요소나 칸 상자에 있는 인라인 콘텐츠를 중앙정렬하기 → text-align: center; !codepen[moonhee0507/embed/zYpaZjr?default-tab=css%2Cresult] text-align을 block 요소(혹은 칸 상자)에 적용해야 하고, 적용 결과 inline contents를 정렬시켜준다. lineheight를 콘텐츠box 높이만큼 주면 콘텐츠를 수직정렬도 할 수 있다. 02. 블록 요소 중앙정렬하기 → margin-left: Auto, margin-right: Auto !codepen[moonhee0507/embed/dyJKzgz?default-tab=css%2Cresult] 위와 똑같은 html에 margin-left: auto; 와 margin-right: auto;를 적용해도

kh6619

✔ flex는 무엇인가? 🚩 정의의 사도 MDN 형님 曰 > CSS 속성 flex는 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 라고 MDN형님은 설명을 해주셨다. 나는 앞서 포스팅했던 레이아웃 요소들과 같이 이친구 또한 레이아웃 배치를 위한 거시기라고 생각하기로 했다. ✔ 그렇다면, flex는 어떻게 사용해야 하는가? 🚩 개구리 왕눈이들을 만나기 위해 먼저 연못을 짓고 개구리들을 풀어주자. > 먼저, 연못을 자세히 들여다보자 무엇이 보이는가? 👉 "pond"라는 부모요소에 "frog"라는 자식요소가 먼저 보일 것이다. 👉 이들에게 각각 "플렉스 컨테이너", "플렉스 아이템" 이라는 이름이 붙어있다. 👉 여기서 우리가 눈여