Frontend/CSS-Flex box7 CSS 7. Flex-Basis & Grow & Shrink (Flex items) Flex-Basis & Grow & Shrink■ flex-basis : flex-item의 초기 크기를 정의함.주축의 방향에 따라 너비나 높이가 될수 있음. ■ flex-grow : flex-item의 증가 너비 비율을 설정함.숫자가 클수록 비율이 커짐. 기본값 '0' ■ flex-shrink : flex-item의 감소 너비 비율을 설정함.숫자가 클수록 비율이 작아짐. 기본값 '1' ● flex-basis 예시 div에 width가 200px;로 지정되어 있어도,2번째 div에는 flex-basis:500px; 이라는 속성을 주었기 때문에2번째 div의 너비는 500px이 됨.● flex-grow 예시flex-grow 속성을 쓰기 전에는 flex-item들이 flex-container의 남는 공간을 .. 2024. 5. 31. CSS 6. Align- Self (Flex items) Align- Self교차축을 기준으로 배열된 단일 요소의 위치를 바꿀 수 있는 속성.flex-item에 적용해야 한다.● align-self 예시 :nth-child(2)를 사용하여 5개의 div중 2번째 요소에 align-self:flex-end;속성을 사용.flex-contatiner가 아닌 flex-items에 사용하였다. flex-direction:row;이므로 주축이 좌 → 우 이고,교차축은 상 → 하이다.align-self:flex-end; 속성은 교차축의 끝에 정렬하므로 div의 2번째 요소만 아래로 정렬되었다. → 하로 변경하였을 때의 결과 > 교차축은 좌 → 우로 변경되어두번째 요소는 중앙에, 세번째요소는 교차축의 끝인 오른쪽 끝에 정렬됨. 2024. 5. 31. CSS 5. Align-Content (Flex contatiner) Align-Contentflex-wrap: wrap;이나 flex-wrap:wrap-reverse가 적용되어 여러개의 행과 열이 있을때교차축을 기준으로 정렬하는 속성.수직을 주축으로 할 때는 열의 간격을 조정하고,수평을 주축으로 할 때는 행의 간격을 조정함.● align-contents 예시 align-contents:center; 속성을 추가 했을 때 실행결과 > align-contents:space-between; 속성을 추가 했을 때 실행결과 >flex-direction:row; 로 변경 후, align-contents:space-between; 속성을 추가 했을 때 실행결과 > flex-direction 을 column에서 row로 변경시 , 주축이 상 → 하에서 좌 → 우로 변경됨.이해를.. 2024. 5. 31. CSS 4. Align-Items (Flex contatiner) Align-Itemsalign-items는 교차축을 따라 아이템을 배열함. ● align-items 예시 본축은 좌 → 우로 향하고교차축은 상 → 하 (기본값)이다.교차축의 끝이 맨아래쪽에 있다. align-items: flex-start; 속성을 넣어도 같은 결과가 나온다. align-items: flex-end; 속성을 추가 했을 때 실행결과>align-items: flex-end; 속성은 교차축의 끝을 시작점으로 하기 때문에,아래에 정렬된다. align-items: center; 속성을 추가 했을 때 실행결과>상 → 하 교차축의 중앙에 맞춰 가운데에 정렬된다. 3번째와 5번째 div의 높이를 늘리고 실행한 결과도 중앙에 맞춰 정렬되는 것을 볼 수 있다. align-items:baseline .. 2024. 5. 31. CSS 3. Flex-Wrap (Flex contatiner) Flex- Wrap주축이 수평일 때 새로운 행을 만들어 요소를 정렬하고주축이 수직일 때는 새로운 열을 만들어 요소를 정렬하는 속성.flex-wrap : wrap-reverse를 사용하면 교차축의 방향이 반대로 된다.● flex-wrap 예시 #container { background-color: #003049; width: 50%; height: 500px; margin: 0 auto; border: 5px solid #003049; display: flex; flex-direction: column; justify-content: space-evenly;}#container div { width: 200px; height: 200px;} fle.. 2024. 5. 31. CSS 2. Justify-Content (Flex contatiner) Justify-Contentflexbox의 주축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성.● justify-content 예시#container는 flexbox 가 되었고,flex-direction속성이 row- reverse이므로 주축의 진행방향이 오른쪽→왼쪽이 되어실행된 결과이다. #container 에 justify-content: flex-start; 속성을 추가하면 flex-start는 주축의 시작부분을 기준으로 flex-item을 정렬하기 때문에 주축의 진행방향이 ( 오른쪽 → 왼쪽 )으로 동일하여 그 전과 그대로이다. #container 에 justify-content: flex-end; 속성을 추가하면 flex end;는 주축의 끝부분(왼쪽)을 기준으로 flex item을.. 2024. 5. 31. CSS 1. Flex Box와 Flex-direction (Flex contatiner) Flex Box?행(row)과 열(column)의 item들을 나열하기 위한 일차원 레이아웃 기능.Flexbox를 이용하면 항목들이 부족한 공간에 맞추기 위해 축소 되거나 여분의 공간을 채우기 위해 변형됨.Flex Box의 본축(Main Axis) 과 교차축(Cross Axis)// CSS 파일#container{ display: flex; } flexbox는 상자나 container에 display:flex 속성을 주는것으로 만들 수 있으며, flexbox안에는 본축( Main) 과 교차축 (Cross)라는 두개의 축이 있다. display: flex속성이 적용된 요소는 flex container가 되고, flex contatiner의 자식 요소들은 자동적으로 flex item이 된다. ■ fle.. 2024. 5. 31. 이전 1 다음
