박스를 레이아웃하기 좋은 flex-box
flex-container을 주축과 교차축을 가지고있다.
justify-contents는 main-axis(디폴트 값: 수평) 기준 명령어
align items는 across axis(디폴트 값: 수직) 기준 명령어
--> 디폴트값 변경
flex-direction: row(default), column, row-reverse column-reverse
flex-box규칙
규칙1. 부모 요소에 flex를 명시해야 한다
display: flex;
<body>
<div>
<div>
<div>
<body>
+body가 height를 가지고있지않으면 align-items를 설정하더라도 이미 맨 위아래를 차지하고 중심에 있어서 바뀌지않는다.---> flex-container에 height 주면 됨 예) height: 100vh;
align items
이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 stretch
- stretch
- flex-start
- flex-end
- center
justify-contents
초기 값은 flex-start
- stretch
- flex-start
- flex-end
- center
- space-around 처음과끝 1, flex항목사이 2
- space-between
- space-evenly 처음과 끝 , 항목 모두 균등
flex-wrap속성
flex-wrap: nowrap(default) 나열된 요소들의 넓이는 부모의 넓이에 맞게 축소됨
flex-wrap: wrap:나열된 요소들의 총 넓이가 부모 넓이보다 클 때 , 이요소들을 다음줄에 이어서 정렬해줌
flex-basis 속성
flex-basis 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 auto이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다 flex 항목에 크기가 지정되어 있지 않으면, flex 항목의 내용물 크기가 flex-basis 값으로 사용됩니다.
flex-grow 속성
남는 공간을 항목들에게 분배하는 방법
flex-grow값을 양수로 지정하면 flex 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어날 수 있게 됩니다.
flex-grow 값각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.
첫 항목의 flex-grow 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 flex-grow 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 flex-grow 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.
flex-shrink 속성
주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다.
만약 flex 컨테이너가 flex 항목을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아집니다. 또한, flex-grow 속성과 마찬가지로 더 큰 flex-shrink 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.
축약형 속성 flex
보통은 flex-grow, flex-shrink, flex-basis 값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 flex 축약형을 많이 사용합니다. flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정됩니다.
flex 축약형 표현
- flex: initial
- flex: auto
- flex: none
- flex: <positive-number>
flex: initial로 지정하면 flex: 0 1 auto 로 지정한 것과 동일하게 동작합니다.
이 경우, flex-grow가 0이므로 flex-basis값보다 커지지 않고
flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다.
flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.
flex: auto 로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며,
flex:initial 과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.
flex: none으로 지정하면 flex: 0 0 auto으로 지정한 것과 동일하며
flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 flex-basis를 auto로 지정했을 때 정해지는 크기로 결정됩니다.
이 축약형은 더 축약해서 flex: 1 이나 flex: 2처럼 쓸수도 있는데,
이는 flex-grow 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 flex: 2는 flex: 2 1 0와 동일하게 처리됩니다.
오직 flex-container에 있는 flex-children만 사용 할 수 있는 기능 order : 순서가 바뀜
.message-row--own .message__bubble{
order: 1;
}
.message-row--own .message__time{
order: 0;
}//코드가 너무 김
.message-row--own .message__info{ //부모
flex-direction: row-reverse;
}// 같은 결과
'코딩 > HTML, CSS' 카테고리의 다른 글
| 컬러를 변수에 넣기 :root (0) | 2021.10.06 |
|---|---|
| position: relatvie; position: absolute; (0) | 2021.10.05 |
| display porperty(inline, block, inline-block) (0) | 2021.10.05 |
| collapsing-margin 마진 상쇄 (0) | 2021.10.05 |
| flex (0) | 2021.08.10 |