flex의 쓰임
일단은 부모태그에게 display:flex; 라는 css를 부여해야한다.
layout을 설정하는 방법중하나인데 가장 효과적이다
생활코딩 flex 설명
https://opentutorials.org/course/2418/13526
-----------------------
종류
<container>
<item></item>
<item></item>
</container>
* container 속성 :
display
flex-direction // 태그 방향 정열 방법
flex-wrap // 줄바꿈이되어 아래로 내려간다...
flex-flow
justify-content
align-items
align-content
* item 속성:
order
flex-grow //여백을 채우는 것,,,,,,, n분의 1로 쪼개 가져간다..
flex-shrink // flex의 경우 화면을 줄이면,, 유연하게 줄어드는게 기본설정인데,, 이걸 0으로 설정하면,, 크기가 고정이 되어버린다..
flex-basis
flex
align-self
*flex로 만든 레이아웃 중 대중적인 레이아웃
Holy Grail layout
'코딩' 카테고리의 다른 글
러스트 자바스크립트 자바 : 객체 인스턴스 new 클래스 struct (0) | 2020.12.25 |
---|---|
러스트 자바 : 데이터타입 ; 기본타입vs 객체타입 (0) | 2020.12.25 |
javascript : 모듈 module (0) | 2019.03.23 |
http-server 서버 실행 (0) | 2019.03.18 |
javascript react : props 간단 설명 (0) | 2019.03.16 |