[CSS] flexbox

flexbox

• 수평축/수직축, 중심축/반대축
• 아이템 꾸미기/ 아이템을 감싸는 컨테이너 꾸미기

 

display:flex; 를 하고 해야함

fiex-direction : row; //기본(수평)
fiex-direction : reverse; //반대로
fiex-direction : column; //수직
column-reverse //수직인데 반대로


flex-wrap : nowrap; //페이지를 줄여도 한줄에 계속 붙어있게함. (기본값)
wrap; //페이지를 줄이면 그 줄에 사이즈가 안맞는것들은 다음라인으로 넘어감


flex-flow : column nowrap //wrap이랑 direction 합해서 쓰는것


//중심축에서 아이템을 어떻게 배치할건지 (그 영역 중심축에서 봤을때 왼/중/오 선택하는 느낌)
justify-content : flex-start //기본값. 왼쪽에서 오른쪾으로. 위에서 아래로(수직)
justify-content : flex-end //아이템의 순서는 유지하되 오른쪽으로 붙게하고
justify-content : center //중앙으로 맞춰줌

justify-content : space-around  //아이템마다 space로 간격을 만듬 아이템마다 중간간격은 (스페이스+스페이스)
justify-content : space-evenly  //웹페이지 벽(마진?)과 아이템 사이 값 전부 똑같은 간격을 넣어줌
justify-content : space-between //맨왼쪽,맨오른쪽은 웹페이지에 맞게 딱 붙게하고 가운데 아이템마다의 정렬은 남는공간으로 똑같이


//각각 아이템을 연결하는 법
align-items: center //아이템을 웹페이지 내의 중앙에서 정렬하게함(수직으로)
align-items: baseline //텍스트가 동일한 위치에 보이도록


//반대축의 아이템을 지정한다
align-content: space-between //위와 아래는 딱 붙어있고 중간의 아이템들만 스페이스값이 들어감
align-content: center //중간에 배치됨


//웹페이지가 커질때 그만큼 크기를 커져야할때
flex-grow: 1;
flex-grow: 2; //2 로하면 다른 아이템에 비해 두배로 커진다. 1로하면 같다.


//웹페이지가 작아질때 그만큼 크기를 작아질때
flex-shrink: 0;
// 2로 하면 다른애에 비해 2배로 작아진다


// 다른아이템들에 비해 어느정도인지
flex-basis : auto; //기본값
//20% 10% 이런식으로, 아이템중 몇퍼센트


//아이템별로 정렬하기
align-self : center; // 아이템 하나만 중간에 놓고싶다


잘쓰이진않지만 알고있기
order: 0; //기본값
2; //아이템 순서가 바뀔때