◾ display,position: box들을 원하는 위치, 사이즈로 배치할 수 있게 하는 것
display
box
1.inline-block: 한줄에 여러개
2.block: 한줄에 하나
item
1.inline: (내용이 없으면 표시x) 컨텐츠, 내용만을 꾸며준다, width,height값 무시 내용의 크기에 맞춰 사이즈가 변경된다.
position
1. 기본값으로 static을 가지고 있다.(html에 정의된 순서대로 browser에게 보여진다)
2. relative로 변경해야된다.
3. absolute로 변경하게 되면, item이 담겨있는 box안에서 위치변경이 일어난다.
4. fixed는 box에서 벗어나서 웹 페이지안에서 움직인다.
5. sticky는 원래 자리에 그대로 있지만 scroll되도 그대로 있다
-main axis&cross axis
수직을 중심축으로 지정하면 수평축은 반대축이 된다
즉, 중심축을 수직이냐 수평이냐 두는지에 따라서 반대축이 바뀐다.
◾ flexbox: box와 item들을 행 또는 열로 자유자재로 배치시켜줄 수 있는 유연한 것 (box가 커지면 각각의 item들이 어떤식으로 커지면서 box의 공간을 채우는지 box가 작아지면 item들이 어떤식으로 작아져서 유연하게 배치되는지를 정리)
*float를 이용해서 이동시키면 안된다
container
1) box에 적용되는 속성값 : display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
*height
%:부모의 높이를 100%로 채움 vh:부모와 상관없이 보이는 것에 모두 나타남
container{
height:100vh;
display:flex;
flex-diretion:row;
}1.display:flex;
flexbox로 만들기위해서
2.flex-direction
row: 왼쪽에서 오른쪽(기본값) row-reverse:오른쪽에서 왼쪽 ⇨중심축:수평
column: 위에서 아래 column:아래에서 위 ⇨중심축:수직
3.flex-wrap
nowrap: 웹이 작아져도 한줄에 붙어있음(기본값)
wrap: 웹이 작아지면 다음줄로 넘어감
4.flex-flow
-한번에 묶어서 하는 것 (순서:flex-direction flex-wrap)
예시: flex-flow:column nowrap;
5.justify-content
-item들을 어떻게 배치할건지 결정해준다
flex-start:왼쪽에서 오른쪽, 위에서 아래로 (기본값)
flex-end:오른쪽으로 배치하거나 밑에서 아래로 배치 (item들의 순서는 유지)
center:중앙
space-around:박스를 둘러싸게 space를 넣어줌
space-evenly:space를 간격을 똑같이 넣어줌
space-between:item을 왼쪽과 오른쪽을 화면에 맡게 배치함
6.align-items
-반대축에서 item들을 어떻게 배치할지 결정
7.align-content
-반대축의 item을 지정하게 됨
space-between:위와 아래의 item들은 딱 붙으면서 중간의 item들에 space가 들어감
item
1.order
-순서를 정해줌
>.item1{ .item{
order:2; order:1;
} }2.container의 사이즈가 바꼈을때 item들의 사이즈를 결정
-flex-grow: container의 공간을 메꿈
-flex-shrink: container가 점점 작아졌을 때 어떻게 행동하느냐를 지정
-flex-basis:item들이 공간을 얼마나 차지해야되는지 세부적으로 명시하기위해
auto:기본값, grow나 shrink에 지정된 것에 맞춰서 item이 변화됨
%:%에 맞게 contianer가 작아지고 커질때 바뀐다.
-align-self: item별로 item을 정렬
.item1{
align-self:center;
}