Flex속성 값에 box를 감싸고 있는 container에 적용되는 속성이 있고 개별 box에 적용되는 속성이 있다.Container에 적용되는 속성 displayflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentBox에 적용되는 속성 orderflex-growflex-shrinkflexalign-self, 이 가운데 다른 속성은 전회 공부했습니다.아이템을 정렬하는 속성에 대해서 공부하고 싶습니다.justify-content와 align-items/align-selfjustify-content는 display:flex이 적용된 아이템의 메인 축(main-axis)의 정렬을 컨트롤할 때 사용한다. 여기서 메인 축은 flex가 먼저 적용될 경우 기본 값은 세로로 놓인 아이템이 옆(row)에 놓이게 되고 여기에서 메인 축은 row방향이다.플렉스가 적용된 컨테이너 사이즈 내에서 아이템의 열 방향의 정렬을 컨트롤한다.align-items는 메인 축의 대 척 방향 즉 열 방향의 정렬을 제어한다.flex-direction에서 속성을 세로(column)로 바꾸면 이때 중심 축은 column쪽이어서 aling-items은 가로(row)방향을 컨트롤한다.justify-content 속성 flex-start: 기본값이며 왼쪽 정렬.flex-end : 오른쪽 정렬.센터: 중앙 정렬. space-between: flexitem이 포함된 컨테이너의 전체 가로 길이를 사용하고 아이템을 양쪽 끝에 배치하여 같은 간격으로 띄운다. space-around: flexitem이 포함된 컨테이너의 전체 가로 길이를 사용하며 space-between과 비슷하지만 양쪽 끝이 약간 떨어져 있다. space-evenly: flexitem이 포함된 컨테이너의 전체 가로 길이를 사용하며 모든 flexitem이 동일한 양 옆면 마진 값을 가진다.예제 연습align-items 속성 stretch: 기본값이며 모든 아이템이 컨테이너 크기에 맞게 늘어난다.center: 플렉스가 적용된 아이템이 보조축 중앙에 정렬된다.flex-start: 플렉스가 적용된 아이템이 보조축의 출발선에 정렬된다.flex-end: 플렉스가 적용된 아이템이 보조축 엔드라인에 정렬된다.baseline : 플렉스가 적용된 아이템의 기준선에 맞게 정렬된다.예제연습align-self는 align-items에서 정렬된 아이템 중 하나만을 선택하여 개별적으로 컨트롤 할 때 사용한다. align-items 속성값과 동일한 효과를 가진다. align-items는 컨테이너에 포함된 모든 아이템의 정렬을, align-self는 하나의 아이템을 개별적으로 정렬할 때 사용! align-self 속성 stretchcenter flex-startflex-endbaseline 예제 연습align-contentalign-content는 flex-wrap과 관련된 속성으로 아이템이 flex-wrap에 의해 2줄 이상 배열되었을 경우 배치를 제어하는 속성이다. align-content 속성 stretch: 기본값으로 모요소 보조축의 전 영역을 차지한다.센터: 모요소의 보조축 중앙에 정렬된다.flex-start: 모요소 보조축의 시작 부분에 정렬된다.flex-end: 모요소의 보조축 끝단에 정렬된다. space-between: 모요소의 보조축 양 끝단에 정렬되며, 같은 거리 간격을 가진다. space-around: 모요소의 보조축 양 끝단에 정렬하지만 space-between과 달리 양끝이 약간 떨어져 있다. space-evenly: 모요소의 보조축에 정렬될 때 아이템이 동일한 양쪽 마진값을 갖는다. 예제 연습orderorder는 flex가 적용된 아이템의 순서를 컨트롤 할 때 사용한다. 예제 연습처www.youtube.com/watch?v=7neASrWEFEM&t=344shttps://www.w3schools.com/cssref/css3_pr_justify-content.asphttps://www.w3schools.com/cssref/css3_pr_justify-content.aspCSS justice-content property W3 Schools는 웹의 모든 주요 언어로 무료 온라인 튜토리얼, 레퍼런스 및 연습을 제공합니다. HTML, CSS, Java Script, Python, SQL, Java 등 인기 있는 주제를 다루고 있습니다.more.www.w3schools.comCSS justice-content property W3 Schools는 웹의 모든 주요 언어로 무료 온라인 튜토리얼, 레퍼런스 및 연습을 제공합니다. HTML, CSS, Java Script, Python, SQL, Java 등 인기 있는 주제를 다루고 있습니다.more.www.w3schools.com트위독의 babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-Flexbox-justify-content-align-items코딩 독학)CSS Flexbox, justify-content, align-items 지난 글에서는 Flex에 대해서 공부했지만 오늘은 Flexbox의 정렬 방법인 justify-contet와 align-items에 대해서 공부할 예정이다.https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex코딩 독학)CSS display, position, flex박스 크기를 조절하는 방법에 이어박스를 배치하는 방법에는 display와 position이라는 개념을 알아야 한다.Positio.babycoder05.tistory.com코딩독학) CSS Flexbox, justify-content, align-items 지난 게시물에서는 Flex에 대해 공부했지만 오늘은 Flexbox 정렬 방법인 justify-contet과 align-items에 대해 공부할 예정이다. https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex 코딩 독학) CSS display, position, flex 박스 크기를 조절하는 방법에 이어 박스를 배치하는 방법에는 display와 position이라는 개념을 알아야 한다. Positio…babycoder05.tistory.com코딩독학) CSS Flexbox, justify-content, align-items 지난 게시물에서는 Flex에 대해 공부했지만 오늘은 Flexbox 정렬 방법인 justify-contet과 align-items에 대해 공부할 예정이다. https://babycoder05.tistory.com/entry/%EC%BD%94%EB%94%A9%EB%8F%85%ED%95%99-CSS-display-position-flex 코딩 독학) CSS display, position, flex 박스 크기를 조절하는 방법에 이어 박스를 배치하는 방법에는 display와 position이라는 개념을 알아야 한다. Positio…babycoder05.tistory.com