자식의 사이즈를 줄여서라도 부모의 크기에 맞게 한줄 정렬한다.
자식들은 자기들의 content-size 에 맞게 늘어난다
display : flex
flex-direction: (row | column) 정렬 하고자 하는 방향을 설정 동시에 (main axis 결정)
default: row
flex-wrap : nowrap 어떻게든 한 줄 안에 모든요소를 정렬 (자식의 사이즈를 줄여서라도)
|| wrap 자식의 사이즈를 절때 줄이면 안되는 상황이거나 , 상황에 따라서 여러줄을 만들 때
default : nowrap
축의 기준은 flex-direction: ( row | column ) 기준 설정 으로 인하여 달라진다.
align-content,align-items : Cross axis 축을 기준으로 정렬 해주고 싶을 경우
default => stretch =>아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.
flex-wrap:wrap 인 경우
align-content : 아이템들의 행 2줄 이상이 되었을 경우 수직 정렬.
flex-grow: 0|1|2|3
flex-basis 보다 늘어 날 수 있는지의 여부를 결정한다.
flex-basis:auto 라면 현재 나 자신의 width 와 동일하다.
(아니 그러면 width :0 이라면?!) -> 자기 자신의 content 크기 만큼 늘어난다.
flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.
예를들면 ) flex-item의 현재 width : 27% 이고,
flex-grow :1 이라면?
부모의 width 100% 이라면 현재 width 100% 되는 것. grow 때문에.
https://parkjaeho.tistory.com/99
flex item 속성
flex-basis flex-item 의 기본 크기를 설정한다. (flex-direction이 row일 때는 너비, column일 때는 높이) 메인 축 기준★ default 는 auto 이다 -->기존 자기 자신의 width 를 base로 가질래 !! 하는 것이 => au..
parkjaeho.tistory.com
display : none
없는 것 처럼 취급해라(렌더하지마라)
즉, 스크린 리더도 읽지 못한다.
width,height 둘 중 하나라도 0으로 준다면 display: none 처럼 되서 스크린리더가 읽어주지 않는다
flex + justify-content: center를 사용할 때,
width: 100%를 추가한 이유는 flex에서 가끔 발생하는 부작용(?) 때문
가끔 display: flex 속성을 준 요소에게 별도의 width값을 선언을 안 해주면,
요소의 width값이 자신이 가진 콘텐츠 width의 합 만큼 줄어드는 경우가 생김.
그래서 혹시나 싶어 width: 100%를 추가하는 것
flex-shrink:0
default = flex-shrink : 1
현재 아래의 사진은 같은 width 160px이다 하지만 왜 길이가 달라보일까?
자식의 사이즈를 줄이는 거든 뭐든 다 필요없고
내 본디 사이즈를 찾아주세요!
flex-shrink:0 을 사용하면 된다.
flex : 1 1 30%
첫번째 인자 : flex-grow : 1
flex-item 원래 크기와 상관없이 flex container 크기를 꽉 채우게 된다.
두번째 인자 : flex-shrink : 1
flex-item 크기가 flex container 의 크기에 맞추어 줄어든다.
세번째 인자 : flex-basis:30%
부모의 width 30%
즉 , 남은 공간을 자동으로 매꿔준다.
'HTML & CSS' 카테고리의 다른 글
| Typography (0) | 2021.04.11 |
|---|---|
| 반응형 (0) | 2021.04.09 |
| transform: translate || scale || rotate (0) | 2021.04.07 |
| Position , Z-index(CSS),viewport (0) | 2021.04.06 |
| padding (0) | 2021.04.06 |
