# Flex
CSS | Layout : position sticky, flex
css만으로 인스타그램에서 스크롤 해도 고정된 위치를 갖는 "회원님을 위한 추천" 부분 구현하기
css 헷갈리거나 잊기쉬운 속성 정리
flex를 쓸 때 다른 속성들보다 쉽게 잘 안써지는 속성이면서 잘 기억에 남지 않는 기본 속성들인 grow, shrink, basis그리드는 flex보다 좀 더 복잡하고 기억하기 쉽지 않지만 훨씬 많응 용도로 사용가능하다.grid-tempate-rows / grid-t
flex
연습 : https://flexboxfroggy.com/justify-content :align-itemsflex-directionorder : 0을 기본으로 순서를 바꿈align-self: 객체하나에 대한 정렬 (align-item과 같은 명령어 이용)fle
[TIL] flexbox 에서 div 한 개만 우측 정렬하기
아래와 같이 하면 됨. 또 다른 방법으로는 왼쪽에 할 것들을 div 로 한 번 더 싸는 방법 참고: https://stackoverflow.com/questions/35269947/how-can-i-align-one-item-right-with-flexbox https://d2.naver.com/helloworld/8540176
[TIL] Layout A to Z
이미지 주위의 텍스트를 감싸기 위해 처음 만들어졌다. 위와 같이 사용하며 float의 속성값으로 left, right, none을 대표적으로 사용할 수 있다. 단어 의미 그대로 left는 선택한 요소를 좌측으로 옮긴다는 의미이며 right는 오른쪽 none은 움직이지
flex를 이용해 nav bar 정렬 tip
flex를 이용해 태그들을 row 정렬을 한다.align-items를 이용해 center를 맞춰준다.원하는 자식 태그를 기준으로 위 사진과 같이 정렬하려면HOME 태그의 margin-right:auto; 혹은about 태그의 margin-left:auto;를 설정해준다
TIL 08 | CSS Flex-box
1. Flex-box Flex-box는 box 정렬의 끝판왕이다!! 기존에 요소들의 수직 정렬은 크게 문제가 되지 않았지만, 수평 정렬의 경우 float 와 clearFix, display: inline-block의 도움을 받아왔다. 하지만 이러한 방법들은 다양한
CSS flex
오늘은 react를 하면서 flex에 대해 오류가 생겼던 부분에 대해서 기술하려고 한다.요소 작성 부분에서 요소들을 flex로 설정을 하지 않을 시에 내용들이 가로로 생기지 않는 오류가 생겼다. 지금의 경우 이렇게 요소가 가로로 쌓이고 있지만 styled-compone
css flex
기존 css에서 불가능하거나 굉장히 어렵게 구현했던 것들을 좀 더 쉽게 구현 할 수 있도록 css3에서 추가된 레이아웃 방식.flex는 자식 요소에게만 적용된다. 후손은 적용되지 않음flex의 방향에 따라 100%의 기준이 달라짐 \- ex flex-directio
(CSS) flex : 아이템에 적용하는 속성
flex 아이템에 적용하는 속성들 유연한 박스의 기본 영역 : flex-basis flex-basis는 flex 아이템들의 기본 크기를 설절한다. (flex-direcrion이 row일 때는 너비, column일 때는 높이) flex-basis의 값으로는 width와 height 등에 사용하는 각종 단위의 수를 사용할 수 있고, 기본값으로는 auto ...
(CSS) Flex
레이아웃 배치 전용 기능으로 고안된 Flex는 기존 사용하던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.
TIL_20 | [HTML/CSS] float는 그만! 강남 Frog의 Flex~🐸💎
오늘은 같이 공부하는 분께 FrontEnd에게 찰떡같은 비유를 들어서 그것으로 시작하려고 한다!ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ진짴ㅋㅋㅋㅋㅋ찰떡같은....ㅠㅠ다들 이런 경험 한번씩 있을 것 같다! (맞아요 제 얘기입니다..)나는 특히 css중에서도 floa