# Flex

woorim0923

flex(플렉서블 박스 레이아웃) display속성인 flex flex-wrap : wrap; -> flex내용이 자동으로 반응형이 적용된다. 📌flex를 컨트롤하는 기본적인 종류 flex-direction = 가장 기본 속성 / row = 가로 정렬 column

swer1262

flex-direction   item의 주 축(방향) 설정flex-wrap   item의 줄 바꿈 설정flex-flow   flex-direction과 flex-wrap의 단축속성justify-content   주 축의 정렬 방법을 설정align-content   교

x5foddl

Flexbox 레이아웃 사용법 ⭐⭐⭐ 박스를 감싸는 부모요소에게 display: flex 사용 CSS Flex에 대해 아주 자세히 나와있는 사이트 Flexbox 세부속성 사용하기

judymango

출처: FLEXGRID 웹사이트 flex/grid의 시각적 예제와 자세한 설명이 담긴 웹 사이트입니다. 강 추 추

lmsmd00

Item에 적용되는 속성 flex-grow -할당 가능한 공간의 정도 -형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간을 의미 -형제 아이템들이 다른 flex-grow 값 = 다른 공간을 의미 flex-shrink -아이템의 크기가 container

shdrnrhd113

displayflex : 본인은 display : block 처럼 작동자식들은 flex 방식으로 다루겠다는 의미justify-content:flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.cente

ljm0527200044

링크https://youareawesomeblueprint-lecture8--jm05271998.repl.co/이번에는 가상선택자를 배워 적용시킨 예시 색깔별 카드에 nth-child로 배경색을 입힘

ljm0527200044

링크https://youareawesomeblueprint-lecture6.jm05271998.repl.co/CSS를 적용 시키며 FLEX를 처음으로 배운날flex를 사용하며 중앙정리를 성공함

an1413

Flex CSS에서 편리하고 멋진 기능인 Flex!!에 대해 알아보자 flex를 사용할 때 순서를 알아보자 Flex를 쓸거야! 1. display : flex ; 선언하기 flex쓴다고 선언하기! 정렬하고자 하는 요소를 감싸는 부모에게 display:flex

kurong

flex, grid

kurong

flexbox, 화면 정가운데 배치

middledown12

flex1차원적 구조비교적 작은 단위에 적합기획의 변경 가능성이 있는 경우에 적합grid2차원적 구조큰 규모에 적합반응형 디자인을 효율적으로 구현display: grid grid-templategrid-template-rows(행) : 1fr 2fr 200pxgrid

sodamjeong

HTML 요소 배치

strawsunny

속성과 인자의 종류가 많아서 항상 외우다가 잊어버리고 개발자도구 틀어서 제작하는 습관이 있어 이번에 flex를 정리하려고 해요.크롬을 제외하고 IE, 엣지의 경우 버전에 따라 다르지만 flex를 지원하지 않는 경우도 있어 아직까지는 float과 inline-block으

imyoox

flex는 "부모"한테 주는 것! 이 모든 것은 부모 태그에 적용된다.적용 시 자식 개체 위드값에flex : 1 -> 영역 풀로 채우기또는width: 20%; / flex: 8;퍼센트 20%, 80% / 비율 2, 8 로도 가능하다.중심축 (J) = justify-co

gosrod05

item 전용 속성 > order : item의 순서를 지정하는 속성 > flex grow(팽창): item이 flex-conatiner 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성 > flex-shrink (수축) : item이 수축하는 정도로 지정하는 속성 > f...

gosrod05

flex-wrap : wrap | warp-reverse; 배치 방법

gosrod05

Flexbox > 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식. Flexbox를 이용할 때 반드시 알아야 되는 것! Flexbox의 구성 flex-container : 정렬이 필요한 요소를 감싸는 요소 it...

hitsuji_velog

CSS 레이아웃의 꽃 !특징을 변경할 때 사용한다.flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리하다.block or inline으로 구분되지 않고 독자적인 속성을 가진 요소로 구분된다.위의 코드에서 부모요소는 container,

hitsuji_velog

직역하자면 띄운다란 의미이다.float 속성을 이용해 해당 객체를 좌/우 정렬을 하며 레이아웃을 구성한다.기본값으로 block element 기본 속성을 그대로 유지한다. 적용 Xdiv와 p태그는 원래 block요소이지만 div(파란박스)를 빼와서 왼쪽으로 땡겨오는 방