1. 플렉스 레이아웃에 대한 기본 지식
⑴ 플렉스 탄성 레이아웃. 모든 HTML 요소는 플렉스 레이아웃으로 지정할 수 있습니다.
Display:inline-flex; Flex 컨테이너는 인라인 블록 요소입니다.
표시: flex ; flex 컨테이너는 블록 수준 요소입니다.
⑵ 플렉스 컨테이너: 플렉스 레이아웃을 채택한 요소를 플렉스 컨테이너라고 합니다.
⑶ 플렉스 아이템: 플렉스 컨테이너의 모든 하위 요소는 자동으로 플렉스 아이템이라는 컨테이너의 구성원이 됩니다.
⑷ 기본적으로 가로축이 주축이고, 주축과 수직인 축이 교차축입니다.
플렉스 항목은 기본적으로 기본 축을 따라 정렬됩니다.
2. 플렉스 컨테이너의 속성
//1.flex-directon属性
// 决定主轴的方向（即flex项目的排列方向）
// flex-direction: row;(默认值，主轴为水平方向，起点在左端)
// flex-direction: row-reverse;(主轴为水平方向，起点在右端)
// flex-direction: column;(主轴为垂直方向，起点在上沿)
// flex-direction: column-reverse;(主轴为垂直方向，起点在下沿)
//2.flex-wrap属性
//默认情况下，flex项目都排列在一条轴线上
// flex-wrap:nowrap;(默认不换行)
// flex-wrap:wrap;(换行，第一行在上方，也就是从上往下排)
// flex-wrap:wrap-reverse;(换行，第一行在下方，也就是从下往上排)
//3.flex-flow
// flex-directon和flex-wrap的简写形式
// flex-flow:<flex-directon>||<flex-wrap>;(默认值为row nowrap)
//4.justify-content
// 定义了flex项目在主轴上的对齐方式
// justify-content：flex-start;(默认值，左对齐（flex-direction: row）)
// justify-content：flex-end;(默认值，右对齐（flex-direction: row-reverse）)
// justify-content: center;(水平居中)
// justify-content: space-between;(两端对齐，flex项目之间的间隔都相等)
// justify-content: space-around;(每个flex项目两侧的间隔都相等，
// 所以，项目之间的间隔比边框的间隔大一倍)
//5.align-items
// 定义了flex项目在交叉轴上的对齐方式
// align-items：stretch;(默认值，若flex项目未设置交叉轴方向（高度）的大小或者设为auto，将占满整个容器交叉轴方向的大小)
//align-items：flex-start;(交叉轴的起点对齐)
//align-items：flex-end;(交叉轴的终点对齐)
//align-items：center;(交叉轴的中点对齐，垂直居中)
//align-items：baseline;(flex项目的第一行文字的基线对齐)
//6.align-content
//定义了存在多根主轴线时，flex项目在交叉轴上如何对齐
// 如果项目只有一根主轴线，该属性不起作用
// align-content：stretch；(默认值，主轴线平分flex容器交叉轴方向上的 空间)
// align-content：flex-start;(交叉轴的起点对齐)
// align-content：flex-end;(交叉轴的终点对齐)
// align-content：center;(交叉轴的中点对齐，整体垂直居中)
// align-content：space-between;(flex项目之间的间隔都相等)
// align-content：space-around;(每个flex项目两侧的间隔都相等
// 所以，项目之间的间隔比边框的间隔大一倍)
3. 플렉스 아이템의 속성
① 주문
플렉스 아이템의 배열 순서를 정의합니다. 값이 작을수록 배열이 높으며 기본값은 0입니다.
② 플렉스 성장
플렉스 아이템의 주축 방향의 배율을 정의하며 기본값은 0, 즉 남은 공간이 있으면 아이템이 확대되지 않습니다. 모든 항목의 flex-grow 속성이 1이면 남은 공간(있는 경우)을 균등하게 분할하고, 모든 항목의 flex-grow 속성이 2이고 다른 항목이 1이면 전자가 차지하는 나머지 공간을 차지합니다. 다른 항목은 두 배가 됩니다. 일부 플렉스 항목에 flex-grow 속성이 있고 일부는 없지만 width 속성이 있는 경우 flex-grow 속성이 있는 항목은 나머지 공간을 균등하게 나눕니다.
③ 플렉스-수축
주축 방향에서 플렉스 아이템의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다. 모든 항목의 flex-grow 속성이 0이 아닌 경우 공간이 부족할 때 비례적으로 축소되며, 한 항목의 flex-grow 속성이 0이고 다른 항목이 1이면 공간이 부족할 때 전자는 축소되지 않습니다
④ 플렉스 기반
추가 공간을 할당하기 전에 가변 항목이 차지하는 주축의 크기(main size)를 정의합니다. 브라우저는 이 속성에 따라 주축에 추가 공간이 있는지 여부를 계산합니다. 기본값은 자동이며 이는 안건.
⑤ 플렉스
flex-grow , flex-shrink 및 flex-basis 의 줄임말입니다.
flex ：<플렉스 성장>||<플렉스 축소>||<플렉스 기반>;
이 속성에는 auto(1 1 auto) 및 none(0 0 auto)의 두 가지 단축키 값이 있습니다.
⑥ 자기 정렬
align-items 속성을 재정의하여 개별 항목이 다른 항목과 다른 정렬을 갖도록 허용합니다.