display : flex  ;  flex-wrap: wrap ; flex-basis: 20% 적용  1) flex 및 wrap, basis 적용 시 기본 적인 모습123456789101112131415  align-items : center  123456789101112131415   align-content : center 1) align-content는 한줄로 이루어진 플랙스 컨테이너(flex-wrap : no-wrap적용시)에는 아무 효과가 없음123456789101112131415 align-items :end 123456789101112131415  align-content: end 1) align-content는 한줄로 이루어진 플랙스 컨테이너(flex-wrap : no-wrap적용시)에는 ..

1. 기본적인 display: flex 적용 시 모습 1) 가로로 정렬 됨    - flex-direction :row 가 기본값 2) content의 너비 만큼 폭이 결정     - 1~5의 요소마다 폭이 다름 123452. flex-basis: 50% 적용 시 모습1)개별요소당 브라우저 전체 너비의 50%를 적용 하였으나 flex 속성상 1줄에만 표기됨2)현재 상태는 각자 전제 너비의 20%만 적용 됨 123453. flex-wrap: wrap 적용 시 모습1) 브라우저의 폭을 넘기면 다음줄로 넘어 감.   - 현재 요소의 크기가 flex-basis: 50% 로 적용 되어 1줄에 2개씩 표현이 된 상태.2) flex를 적용한 요소에 적용 하여야 한다 ( flex-basis 가 적용 된 부모요소에 적용..

Flex 적용 시 기본적인 형태   1) flex-direction : row; 이 기본 값  2) 가로 폭은 content의 크기만큼 가지기 때문에 균일하지 않다.See the Pen Flex연습 by 최용훈 (@rspvzamj-the-styleful) on CodePen. flex-grow : 1 적용 1) flex 속성이 적용된 자식요소를 선택해야함 2) 5개에 남은 여백을 나눠서 받음 3) 기존 content 폭 + 남은여백/5 가 적용이 되서 여전히 폭이 동일 하지 않음.See the Pen Flex연습 by 최용훈 (@rspvzamj-the-styleful) on CodePen.   flex-basis: 100px 적용 1) 각 요소가 동일하게 100px 로 적용이 된다.See the Pe..