Flex 레이아웃 및 Grid 레이아웃 예시 공유

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

相关推荐：

Flex布局的可伸缩性详解

CSS3中关于Flex布局的详解

CSS使用Grid布局构建网站首页

위 내용은 Flex 레이아웃 및 Grid 레이아웃 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!