오늘은 내가 자주 쓰는 flexobox에 대해 적어보려한다. . 나는 css에서 flex 속성이 제일 좋다..!!.. 아주 편리.. float도 되게 많이 쓰던데 나는 flex가 조 아 . .
● flex의 속성값
flex의 속성값은 부모에 주어야하는 속성값과 자식에게 주어야하는 속성값으로 나뉜다.
- 부모에게 주어야하는 속성값
- display: flex;
- flex-direction : colum , row (row-reverse, colum-reverse)
- justify-content: flex-start, flex-end, space-between, space-around, space-evenly
- align-items: flex-start, flex-end, center, stretch
- align-content: flex-start, flex-end, space-between, space-around, space-evenly, stretch
- gap
● flex 부모에게 주어야하는 속성값
flex 속성을 쓰려면 정렬을 하려는 요소의 부모 요소에 display: flex; 를 주어야한다. 그 다음 나머지 속성들은 정렬에 관련된 속성이다.
- flex-direction 은 안에 있는 block 정렬을 가로로 할 것인지, 세로로 할 것인지 정할 수 있다.
- justify-content 는 컨텐츠를 x축에서 어느 쪽에 둘 건지 정할 수 있다. ex) 왼쪽, 오른쪽, 가운데
- align-items 는 컨텐츠를 y축에서 어느 쪽에 둘 건지 정할 수 있다. ex) 왼쪽, 오른쪽, 가운데
- align-content는 y축을 기준으로컨텐츠 단위로 보고 생각하면된다. 컨텐츠를 어디 쪽에 박아둘건지로 생각하면 된다..
- 아래는 현재 flex-direction은 row, justify-content과 align-items를 center로 두었다.
- 차례대로 align-content를 stretch, flex-start, center, flex-end, space-between, space-around, space-evenly로 설정했다.
- gap 은 block요소들 사이의 여백을 설정할 수 있다.
