# flex direction

beckhye

구글에서 폰트 추가 1. 코드 추가 해당문구 추가 원하는 폰트 다운 해당 폰트 추가 icon fontAwesome사이트 head 끝 태그 전에 붙혀넣기 ![](https://velog.velcdn.com/images

sky-pey

~ 오늘은 10일차 ~ - 목차 1. Flexbox --- Flex Container Properties --- 2. Flex-direction 3. Flex-wrap 4. Justify-content 5. Align-items & Align-content & Align-self --- Flex Items Properties --- 6. Order 7. Flex-grow 8. Flex-shrink 9. Flex-basis 10. Flex + 복기일기 1. Flexbox 요소를 효율적이고 동적으로 배열할 수 있는 1차원의 레이아웃 모델 (1) Flexbox 구성요소 Flex Container - display: flex로 설정 Flex Items - 플렉스 컨테이너의 직계 자식 <br

stopotato

넷플릭스 개인 프로젝트 (두구둥) 1일차 비회원용 메인 페이지 구현 후기 css 감자 탈출 할 수 있을까..... 1. 문제점 => html에 입력한대로 나오지 않고 영역이 겹쳐서 출력되었다. => 해결방안 : 안내를 쌓고 있는 d

yeonn

01 Flexbox (Flexible Box Module) 'Container' > flex-direction: row / column; flexbox에서 레이아웃의 방향을 결정하는 속성이다. row가 기본값이며 메인축 즉, 가로축 방향을 설정하고 왼쪽에서 오른쪽으로 item이 정렬된다. column은 교차축 즉, 세로축 방향을 설정하는 값이고 위에서 아래로 item이 정렬된다. 이 때, row와 column모두 reverse를 적용할 수 있는데 reverse를 적용하게 되면 row는 오른쪽에서 왼쪽으로, column은 아래에서 위로 요소들이 정렬된다. 03 justify-content > flex-flow: column wrap;

jswtncapetnc

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

mike7643

flex 레이아웃 웹 사이트의 구조를 영리하게 짤 수 있다. display: flex / (inline-flex) display를 flex로 지정하면 플렉스 방식으로 자식 요소들을 배치하게 된다. inline-flex는 해당 컨테니어 요소를 인라인으로 만든다는 차이가 있다. 부모요소에 적용되는 flex레이아웃 display: flex-direction flex-direction의 값 row(가로로 왼쪽부터) column(세로로 위부터) row-reverse(가로로 오른쪽부터) column-reverse(세로로 아래부터) 내부 요소(아이템)들을 위의 값에 따라 justify-content, align-items, align-content 등의 속성들이 작용할 방향이 결정된다. justify-content 속성 justify-content는 메인 축에서 아이템들을 정렬할 방식을 정한다. 값은 인터넷 검색, 찾아서 써보기~ flex-start(end)는

diao0321

Flex 속성 flex-direction : row | row-reverse | column | column-reverse > row(default) >row-reverse >column >![](https://velog.velcdn.com/images/diao0321/post/a76d385b-d2cf-4d90-9473-62e4c18b484f/im

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

rondido

flexbox 컨테이너안에 item들이 있어야 하는 즉, 부모와 자식간의 관계를 가지고 있어야 성립 2차원의 평면이 아닌 1차원의 요소들을 정렬하기 위해 나온 개념 용어 정리 felx container item의 부모 felx item 부모의 자식간의 관계에서 자식의 해당 main axis 행의 축, 주축, x축, 가로 축 cross axis y축, 열의 축, 세로 축, 교차 축! display container안에 있는 item들을 정렬 display-outside 요소의 외부 디스플레이 유형을 설정하는 키워드 display-inside 요소의 내부 디스플레이 유형을 설정하는

joahkim

display: flex '위의 코드로 flex의 시작을 알린다' Flex는 뭘까? 정렬을 뜻한다. word 문서를 살펴보면 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등 정렬이라는 단어를 볼 수 있다. 웹에서도 요소를 정렬할 때는 다양한 기능이 있지만 그 중 flex를 사용하면 간단하게 요소를 정렬할 수 있다. > Flex에는 Flex items와 Flex container가 있다. flex의 속성들은 `flex-

uhye

패스트캠퍼스 강의를 정리한 내용입니다. "The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명" CSS flex 박스의 크기, 방향, 순서, 정렬, 간격 등 배치에 관한 거의 모든 것을 제어하는 새로운 박스 모델 IE 브라우저에서 발생하는 버그가 많으므로 IE를 지원해야 하는 경우 비추천 IE bugs Minimum content sizing of flex items not honored Column flex items set to align-items: center overflow their container min-height on a flex container won't apply to its flex items ⚠ flex shorthand declarations with unitless flex-basis values are ignored ⚠ **Column flex items d

dnjswn123

Flex > 여러 요소를 한 줄로 묶어 정렬 하는 기능 display: flex; flex-direction: 컨테이너 안의 요소들이 정렬해야 할 방향을 지정 row: 요소들을 텍스트의 방향과 동일하게 정렬 (기본값) row-reverse: 요소들을 텍스트의 반대 방향으로 정렬 column: 요소들을 위에서 아래로 정렬 column-reverse: 요소들을 아래에서 위로 정렬 flex-direction: column 일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다. ![](https://images.velog.io/images/dnjswn123/post

yoojinpark

11/8 다시 시작된 월요일 오늘은 아침부터 비가 엄청 쏟아지고 있다. 비소리에 놀라깼지만 사실은 어제밤부터 flex에 대한 개념이 흐릿해서 그 생각에 잠이 깼다. 수업듣기 전에 flex 좀 살펴보고 들어가야 겠다. 1. flex 📗 flex 이전의 이야기... flex이전에 수직정렬을 위해서, display: block을 display:inline으로 해서 수평정렬을 할 수 있었다. 하지만, 이 경우 인라인 요소의 특성이 적용되어, 너비나 높이, margin-top, margin-bottom을 쓸 수 없기때문에 원하는 대로 꾸미기가 어려웠다 그래서 사용했던게 inline-block,하지만 사실은 사용하는데에 약간의 번거로움이 있다. 문제: 태그 사이에 줄바꿈이 공백으로 인식되어 버린다. 해결방안 1) 줄바꿈을 없애면 된다. 2) 부모요소에 font-size:0을 설정하고, 본인에게 다시 font-size를 지정한다. 이렇게 해결방안은

songjy377

📚 Flexbox 가로 혹은 세로, 직선의 형태로 요소들을 1차원 정렬해줄 수 있다. 부모 container내부에 item 들을 정렬할 수 있다. 요소가 flex가 되는 순간 block요소가 된다. main axis : 정렬의 주축 / cross axis : 교차축(기본은* 가로/세로, 왼쪽->오른쪽/ 위->아래*이다.) -해당 요소가 부모인지, 자식인지 정확한 이해가 필요하다. item과 container이 함께 있어야 한다. display 속성을 사용한다. ✅ display displa

qkrcndtlr123

flex-container(father) & flex-item(box) before-flex.png &nbsp;&nbsp;위는 예시로 다룰 html 코드고 아래는 css 코드입니다. flex-item(box)은 flex-container(father)에 display: flex를 부여하는 즉시 효과가 적용됩니다. flex-item(요소)을 컨트롤하고 싶으면, flex-container(부모)에 속성을 주어야 합니다. flex-container(부모)는 width, height에 의해서 아이템을 정렬합니다. 수평 정렬을 주고 싶을 땐 충분한 width가 필요하고, 수직 정렬을 주고 싶을 땐 충분한 height가 필요합니다. 다양한 옵션들이 존재하고 이는 반응형이 적용됩니다