본문 바로가기 메뉴 바로가기

썬이의 IT세상

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

썬이의 IT세상

검색하기 폼
  • 분류 전체보기 (112)
    • 개발 세상 (86)
      • CS (2)
      • JS&TS (9)
      • React Native (46)
      • 에러 해결 노트 (19)
      • expo (1)
      • git (2)
      • React (3)
      • CSS (1)
      • Firebase (3)
    • 끄적이기 (5)
      • Private Box (3)
      • ChatGPT (4)
      • VSCode (4)
      • MMEIN (2)
    • 일상 (5)
      • 맛집 탐방 (5)
  • 방명록

개발 세상/CSS (1)
[CSS] flex 영역에 text가 넘칠 때_flex-shrink를 통해 해결해보자!

만약 View 컴포넌트에 {children} 위와 같이 행으로 나열되는 컴포넌트를 배치할 때, 아래 예시 이미지와 같이 화면을 벗어나는 경우가 생기는데 이럴 경우 텍스트 영역만 아래로 확장하고 싶을 것이다. 이를 해결하는 방법은 아주 간단한데, flex-shrink 스타일만 준다면 해결된다. ... 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 텍스트가 넘쳐흘러~ 안드로이드도 물론 적용된다. flex 관련된 스타일의 경우 flexShrink를 포함하여 flexGrow 등 많은 속성들이 있는데 몰라서 잘 사용하지 못하는 경우가 많다. 이를 계기로 더 공부해봐야지 ㅎㅎ

개발 세상/CSS 2023. 7. 18. 12:01
이전 1 다음
이전 다음
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • vsC
  • Mac
  • ios
  • rn
  • useEffect
  • Xcode
  • vscode
  • Ai
  • ChatGPT
  • build
  • CSS
  • Android
  • React Native
  • React Hooks
  • FlatList
  • IMAGE
  • 영종도데이트
  • typeScript
  • Firebase
  • REACT
  • It
  • JavaScript
  • 스파르타코딩클럽
  • 코린이
  • app
  • TS
  • useState
  • reactQuery
  • 앱개발
  • ReactNative
more
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바