# Flex

rakkoon23

과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.float은 배우기 어려움.이러한 상황에서 flex가 등장함.flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그

djaxornwkd12

Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flex의 2가지 개념 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. 위에서 살펴본 바와 같이 Co

sv002

넷플릭스의 상단 로고와 로그인이 있는 바를 만들기위해 float나 여러가지 방법이 있겠지만요새는 가장 주로 사용하는 flex를 써서 쉽고 유연하게 배치해보았다.flex에서 중요한것은 flex container 안에 flex item 이 들어있다는 것이다.containe

parkoon

flex-shrink 의 계산은 flex-basis, width, height 의 영향을 받기 때문에 여간 까다로운 일이 아니다. 실무에서는 많이 사용해보진 않았지만, 계산법은 알고 있어야 할 것 같아 정리 해본다.위 그림은 flex-basis의 값이 각각 100px

jongsunpark88

나는 건축설계를 하듯이 하려고 한다. 큰 덩어리(mass)을 잡고, 메스의 모양을 얼추 잡은 뒤 그 메스 안에 공간을 생성한다. 이 공간은 휴식을 위한 공간, 생활하는 공간 등등, 그리고 그 안에는 룸을 통해 실제로 어떤 행위가 일어날 수 있도록 한다.HTML 요소가

slaslaya

overflow-x:scroll 를 적용하면서 여러 케이스들을 보았는데 이를 정리.결국 방법은 문서에 있었다. 😂flexbox의 기본개념 MDN으로 익히기flex-wrap은 item들이 여러 행에 나열될 수 있도록 도와준다.default값은 nowrap이다. 그래서

slaslaya

공부 이유 잘~ 정리된 블로그글들에서 내가 필요한 layout을 찾아 복붙하는 일들이 많았다. 😓(반성중) 이전에 일할 때 하위 브라우저를 맞춘다는 이유로 잘 안써봄.. flexbox에서 overflow:scroll을 작업하는데 많은 삽질과 많은 시간을 소비하여 문서

nowhhk

부모 컨테이너를 플렉스로 선언하면, 그 안에 종속된 칠드런 박스들을 움직일 수 있다. 각각의 박스에게 일일히 명령할 필요가 없다.flex-dirextion: row; 일때 (디폴트) justify-content 수평으로 적용 align-items 수직으로 적용flex

lllen

부모에 적용되는 요소들(아이템들의 부모)row / column / row-reverse / column-reversflex방향wrap / wrap-reversfloat처럼 화면이 줄어들면 자동으로 아래로 떨어진다.flex-start / center / flex-end

teddybearjung

만약 내가 많은 수의 박스를 가지고 싶은 경우에, float 나 inline-block 을 여기저기 바르는 방식은 박스가 옆으로 떨어지는게 아니라 밑으로 내려간다.이 경우에 자세히 보면 좌우 마진이 다르다. 그래서 일일이 7.2 px, 7.8 px 이렇게 마진값을 수정

jch9537

화면을 스타일링 할 때 항상 어려워하는 flex와 grid에 대해 블로깅을 해야겠다.이건 내가 정리해서 적는 것 보다 어려울 때마다 보는 게 더 좋을 것 같다.참조영상 : https://www.youtube.com/watch?v=eprXmC_j9A4엄청 이해하

wndtlr1024

카드리스트 컨텐츠 높이조절 부모컨테이너에 flex하고, 내용이 들어가는곳에 아래 코드를 입력해주면 (flex-grow) 높이가 다른 문장이여도 박스가 자동으로 늘어난다.

wndtlr1024

rem : html 폰트사이즈 기준em : 현재부모의 폰트사이즈 기준

wndtlr1024

창을 늘렸다 줄였다하면 찾기 버튼은 위치가 고정되어있고 검색창만 줄어들었다 늘어났다함.부모가 flex속성이여서 자식들은 flex 아이템이된다.flex의 기본속성은 align-items:stretch 이다. (세로로 늘어남)=> 부모속성에 height:40px을 줄경우

wndtlr1024

padding:1rem => 현재 폰트사이즈만큼 패딩을주겠다.font-size:1rem => 현재 html에 설정된 폰트 사이즈를 1rem으로

ceres

Flexbox Froggydisplay: flex; 후 적어줘야함justify-content: 가로정렬 ex) justify-content: flex-end;flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으

wndtlr1024

왼쪽 결과물에서 보다시피 C만 맨 끝으로 떨어트리고싶을때 사용하는 기법.으로는 구현이 어려울때 사용함왼쪽 결과물이 사진으로는 짤려보이지만 왼쪽에서부터 1:8:1 비율이라고 보면 된다. (총합 10)각 끝의 컬럼들은 width(사이트 크기)가 바뀌어도 고정되어있고 ( f

wndtlr1024

위 사진과 똑같이 padding으로 이미지를 가운데 정렬 할 수 있겠으나,padding으로 할 경우 svg로 만든 폰트어썸과 같은것 들은 각기 크기가 달라 붕 뜨는 경우가 생김 그래서 flex사용을 권장함

onikss793

CSS를 HTML에 적용하는 세 가지 방법의 장단점 inline style 장점: 태그 단위로 스타일을 지정하기 때문에 특정 태그에 어떤 스타일을 적용시켰는지 직관적으로 알기 쉽다 단점: 스타일 일괄 적용이나 일괄 변경 등의 작업을 할 때 매우 비

bearsjelly

css의 flex란? element들의 위치를 쉽게 잡아주는 속성. 예를 들면... flex를 잘 모르던 시절 대개 이런 방식으로 구조를 짜고 스타일을 잡았다. 결과물은 스크린샷 2020-02-07 오후 10.55.17.png 메뉴를 얻고자 많은 스타일을 사용하게 되었다. 좀 더 디테일하게 스타일을 잡게된다면 마진과 패딩값, 요소들에게...