[스마트UIUX]4,5일차(flex요소)
static : 기본값
relative : 흐름제외 x
absolute : 흐름 제외 x
top :
left :
right :
bottom :
기준값 / 조상의
position 설정되어있는
[flex box]
행 또는 열 주축 설정을 해준다.
웹 요소를 배치 정렬하는 1차원 레이아웃 방식
플렉스의 기본 개념 : 좌우로 나온다
https://yeanana.tistory.com/11
[웹1]240123-10일차(flex 시작)
https://codepen.io/limyena/pen/XWGaKxP flex 시작하기 ... codepen.io .flex-container에 폰트사이즈 0을 주면 텍스트가 사라져버리기때문에 .flex-item에서 폰트사이즈를 다시 적용해줘야한다. .flex = 인라인블럭의 불
yeanana.tistory.com
https://yeanana.tistory.com/12
[웹1]240125-11일차(flex요소, 개구리 게임)
https://codepen.io/pen [코드펜 열기] Create a New Pen Behavior Auto Save If active, Pens will autosave every 30 seconds after being saved once. Auto-Updating Preview If enabled, the preview panel updates automatically as you code. If disabled, use the
yeanana.tistory.com
*flex-container - 부모
레이아웃을 결정할 요소
*flex-item - 자식
flex컨테이너 안에 있는 박스
*flex-direction
주축의 방향성을 결정한다
- row (기본값) ↓
- row-reverse ↓
- column ↓
- column-reverse ↓
*flex-wrap
item들이 강제로 한줄에 배치할 것인지
가능한 영역 내에서 벗어나지 않게 여러 행으로 나누어 표현할 것인지를 결정
- nowrap (기본값) : 공간이 부족해도 한줄배치 ↓
- wrap : 공간이 부족해지면 여러 행으로 배치
*flex-flow : direction 과 wrap을 한번에 사용할 수 있는 속성
- column wrap
*justify-content : 박스들이 주축 따라 배치될때 요소사이의 공간 분배
- flex-start (기본값)
- flex-end : 뒤에서부터 앞으로
- center : 가운데 정렬
- space between :
- space-around
*align-items : 교차축으로 정렬
*align-self : 개별요소,자식
*align-contents : 교차축 정렬
- space-around
- space-between
*flex-grow : flex-item이 기본 크기에 대해서 더 커질 수 있다