Flex 레이아웃 및 Grid 레이아웃 예시 공유-HTML 튜토리얼-php.cn

Flex 레이아웃은 오래전부터 사용했는데 매우 유용하다고 생각합니다. 그러나 호환성 때문에 자주 사용되지는 않습니다. 따라서 Flex 레이아웃을 사용할 때는 상대적으로 모바일과의 호환성이 높다는 점을 고려해야 합니다. 터미널.

flex 레이아웃은 웹 페이지 레이아웃입니다

container attribute

1.display:flex/inline-flex
2.flex-direction 决定主轴的方向（即项目的排列方向）
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。 
3.flex-wrap 决定换不换行，默认不换行
flex-wrap: nowrap | wrap | wrap-reverse;
4.flex-flow 是flex-direction和flex-wrap的简写方式
flex-flow: <flex-direction> || <flex-wrap>;
5.justify-content 决定了项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6.align-item 定义垂直位置，可以通过这个定义垂直居中
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
7.align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

로그인 후 복사

grid 레이아웃은 매우 좋지만 호환성은 별로 좋지 않습니다. 현재 여러 브라우저를 테스트했으며 Google, Firefox를 지원합니다. Opera는 Safari, IE10 이하, 360, QQ 브라우저를 지원하지 않습니다.

1. 그리드 컨테이너

1.display:grid/grid-inline

2.grid-template-columns 및 Grid-template-rows 속성 그리드의 열과 행을 명시적으로 설정할 수 있습니다.

fr 단위는 열을 표시하는 그리드 트랙을 만드는 데 도움이 될 수 있습니다. 이는 그리드 컨테이너에서 사용 가능한 공간을 나타냅니다(Flexbox의 단위 없는 값과 마찬가지로).

grid-template-columns: 1fr 1fr 2fr

로그인 후 복사

minmax() 함수는 그리드 트랙의 최소 또는 최대 크기를 만드는 데 사용됩니다. minmax() 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 그리드 궤도의 최소값을 정의하고, 두 번째 매개변수는 그리드 궤도의 최대값을 정의합니다. 어떤 길이 값도 허용되며, 자동 값도 허용됩니다. auto 값을 사용하면 콘텐츠의 크기에 따라 그리드 트랙을 늘리거나 줄일 수 있습니다.

grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;

로그인 후 복사

peat()는 반복되는 그리드 트랙을 만들 수 있습니다. 이는 동일한 크기의 그리드 항목과 여러 그리드 항목을 만드는 데 적합합니다. peat()는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 그리드 트랙이 반복되어야 하는 횟수를 정의하고, 두 번째 매개변수는 각 트랙의 크기를 정의합니다.

grid-template-rows:peat(3, 1fr);

grid-template-columns: 30pxpeat(3, 1fr) 30px;

2. 간격

1.grid-column-gap 열 및 열 만들기

2.grid-row-gap 사이의 간격은 행 사이의 간격을 만듭니다

3.grid-gap

Grid-gap은 두 개의 값을 지정하는 경우 Grid-row-gap 및 Grid-column-gap의 약어입니다. , 첫 번째 값은 Grid-row-gap 값을 설정하고 두 번째 값은 Grid-column-gap 값을 설정합니다. 하나의 값만 설정하면 행과 열 사이의 간격이 동일하다는 의미, 즉, Grid-row-gap과 Grid-column-gap의 값이 동일하다는 의미입니다.

3. 그리드 선

1. [grid-row-end] [grid-column-start] [grid-column-end]

그리드 항목은 그리드 선을 통해 위치를 지정할 수 있습니다. 그리드 선은 실제로 그리드 열이나 행 사이에 있는 선의 시작과 끝을 나타냅니다. 각 라인은 그리드 트랙에서 시작하며 그리드의 그리드 라인은 1부터 시작하여 각 그리드 라인은 1

grid-row-start: 2;
grid-row-end: 3; 
grid-column-start: 2; 
grid-column-end: 3;

로그인 후 복사

2씩 점차 증가합니다. [grid-row] [grid-column]

행 시작(row-start) 및 그리드 행 끝(grid-row-end)의 약어입니다. 그리드 컬럼은 그리드 컬럼 시작과 그리드 컬럼 엔드의 약어입니다. 값이 하나만 제공되면 Grid-row-start(grid-column-start) 값이 지정되고, 두 값이 제공되면 첫 번째 값은 Grid-row-start(grid-column-start)의 값입니다. ), 그리고 두 값은 그리드-행-끝(grid-column-end)의 값이며, /

grid-row: 2

grid-column으로 구분되어야 합니다. : 3 / 4;

3 .키워드 범위 뒤에는 병합할 열 또는 행 수를 나타내는 숫자가 옵니다

grid-row: 1 / span 3;
grid-column: span 2;

로그인 후 복사

4.【grid-area】4개의 값을 지정합니다. 첫 번째 값은 Grid-row-start에 해당합니다. , 두 번째 값은 Grid-column -start에 해당하고, 세 번째 값은 Grid-row-end에 해당하고, 네 번째 값은 Grid-column-end

grid-area: 2 / 2 / 3 / 3;

에 해당합니다. 5. 그리드 라인 명명

배전망 그리드 이름은 대괄호 [그리드 라인 이름]으로 묶어야 하며 그 뒤에 그리드 트랙의 크기 값이 와야 합니다.

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];

grid-template-columns: [col-1-start] 1fr [col -2-start] 1fr [col-3-start] 1fr [col-3-end];

그리드 선에 동일한 이름을 지정하려면 Repeat() 함수를 사용하십시오.

grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
grid-template-columns: repeat(3, [col-start] 1fr [col-end]);

로그인 후 복사

반복() 함수를 사용하여 그리드 선의 이름을 지정하면 동일한 그리드 선 이름을 가진 여러 그리드 선이 생성됩니다. 동일한 그리드선 이름은 그리드선의 위치와 이름을 지정하며, 그리드선 이름 뒤에 해당 번호가 자동으로 추가되므로 그리드선 이름도 고유한 식별자입니다

동일한 그리드선 이름을 사용할 수 있습니다. 그리드 항목의 위치를 설정합니다. 그리드 선의 이름과 번호는 공백으로 구분되어야 합니다

grid-row: row-start 2 / row-end 3;
grid-column: col-start / col-start 3;

로그인 후 복사

6. 그리드 영역 이름 지정

Grid-template-areas 그리드 영역 이름을 참조하여 그리드 항목 위치를 설정할 수도 있습니다

grid-template-areas:   "header header"   "content sidebar"    "footer footer";
grid-template-rows:    150px 1fr 100px;

로그인 후 복사

grid-template-columns: 1fr 200px;

로그인 후 복사

7.grid- auto-flow 그리드의 기본 흐름 방향은 행입니다. Grid-auto-flow 속성을 통해 그리드 흐름의 방향을 열로 변경할 수 있습니다.

CSS 상자 정렬 모듈은 그리드 항목의 정렬을 보완합니다. 그리드 행 또는 열 축.

【justify-items】

【justify-self】

　justify-items 및 justify-self는 행 축을 따라 그리드 항목의 정렬을 지정하고 align-self는 열을 따라 그리드 항목의 정렬을 지정합니다. 축 웨이.

　　justify-items和align-items应用在网格容器上

【align-items】

【align-self】

　　align-self和justify-self属性用于网格项目自身对齐方式

　　这四个属性主要接受以下属性值：

auto | normal | start | end | center | stretch | baseline | first baseline | last baseline

로그인 후 복사