CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).

이전 글 "WeChat 미니 프로그램 페이지에 구현된 저장 사진 심층 분석(코드 포함) "에서 WeChat 미니 프로그램 페이지에 구현된 저장 사진에 대한 이해를 말씀드렸습니다. 다음 글에서는 CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

호환성

2009년 W3C는 간단하고 완전하며 반응성이 뛰어난 새로운 솔루션---Flex 레이아웃을 제안했습니다. 다양한 페이지 레이아웃 구현 . W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。

• 标1仅支持旧的flexbox规范，不支持包装。

• 标2仅支持2012语法

• 标3不支持flex-wrap，flex-flow或align-content属性

• 标4部分支持是由于存在大量错误（参见已知问题）

概念

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

以下 6 个属性设置在容器上。

• flex-direction水平还是垂直排列

• flex-wrap换不换行

• flex-flow以上 2 个属性的缩写

• justify-content水平对齐方式

• align-items垂直对齐方式

• align-content多行均衡分布

<strong>flex-direction</strong>属性

flex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction：row | row-reverse | column | column-reverse; 

• row（默认值）：主轴为水平方向，起点在左端。

• row-reverse：主轴为水平方向，起点在右端。

• column：主轴为垂直方向，起点在上沿。

• column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse; 

• nowrap（默认）：不换行。

• wrap

  

Mark 1은 이전 flexbox 사양만 지원하고 패키징을 지원하지 않습니다.

Mark 2는 2012 구문만 지원합니다🎜🎜

🎜Mark 3은 flex-wrap, flex-flow 또는 align-content 속성을 ​​지원하지 않습니다 🎜🎜

🎜Mark 4는 많은 버그로 인해 부분적으로 지원됩니다(알려진 문제 참조)🎜🎜🎜🎜Concept🎜🎜Flex는 Flexible Box의 약어입니다. >, "유연한 레이아웃"을 의미하는 것은 박스 모델에 최대의 유연성을 제공하는 데 사용됩니다. 🎜🎜🎜Flex 레이아웃으로 설정한 후에는 하위 요소의 float,clear 및 vertical-align 속성이 유효하지 않습니다. 🎜🎜🎜 Flex 레이아웃을 채택한 요소를 Flex 컨테이너(flex 컨테이너)라고 하며, "컨테이너"라고도 합니다. 모든 하위 요소는 자동으로 "항목"이라고 하는 Flex 항목(flex item)이라고 하는 컨테이너 멤버가 됩니다. 🎜🎜컨테이너에는 기본적으로 가로 기본 축(기본 축)과 세로 교차 축(교차 축)이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 main start라고 하고, 끝 위치를 main end라고 합니다. 교차축의 시작 위치는 다음과 같습니다. 교차 시작이라고 하며 끝 위치를 교차 끝이라고 합니다. 🎜🎜항목은 기본적으로 주축을 따라 정렬됩니다. 단일 항목이 차지하는 주축 공간을 기본 크기, 교차 축이 차지하는 공간을 교차 크기라고 합니다. 🎜🎜컨테이너 속성🎜🎜다음 6가지 속성이 컨테이너에 설정됩니다. 🎜

• 🎜flex-direction수평 또는 수직 배열🎜🎜
• 🎜flex-wrap 줄 바꿈 여부 🎜🎜
• 🎜flex-flow위 2개 속성의 약어🎜🎜
• 🎜justify-content가로 정렬🎜🎜
• 🎜 align-items수직 정렬🎜🎜
• 🎜align-content다중 행 균형 분포🎜🎜🎜🎜<strong>flex-direction</strong> 속성🎜🎜flex-direction속성은 주축의 방향(즉, 항목이 배열되는 방향)을 결정합니다. 플렉스 방향: 행 | 행 역방향 | 열 역방향 ; 🎜
  • 🎜row (기본값): 주축은 수평이고 시작점은 왼쪽 끝입니다. 🎜🎜🎜🎜 🎜
    • 🎜row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있습니다. 🎜🎜🎜🎜 🎜
      • 🎜column: 주축은 수직이고 시작점은 위쪽 가장자리에 있습니다. 🎜🎜🎜🎜 🎜
        • 🎜column-reverse: 주축이 수직이고 시작점이 아래쪽 가장자리에 있습니다. 🎜🎜🎜🎜 🎜🎜flex-wrap🎜🎜기본적으로 항목은 한 줄("축"이라고도 함)에 정렬됩니다. flex-wrap 속성은 한 축이 맞지 않는 경우 선을 감싸는 방법을 정의합니다. 🎜🎜flex-wrap: nowrap | 랩 | 랩-리버스 🎜
          • 🎜nowrap 기본값): 줄 바꿈이 없습니다. 🎜🎜🎜🎜 🎜
            • 🎜wrap: 줄 바꿈, 첫 번째 줄이 맨 위에 오도록 합니다. 🎜🎜🎜🎜🎜🎜

              • wrap-reverse: 아래 첫 번째 줄을 래핑합니다. wrap-reverse：换行，第一行在下方。

              

              flex-flow

              flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

              <strong>justify-content</strong> 属性（水平方向对齐）

              justify-content: flex-start | flex-end | center | space-between | space-around; 

              • flex-start（默认值）：左对齐

              

              • flex-end：右对齐

              

              • center：居中

              

              • space-between：两端对齐，项目之间的间隔都相等。

              

              • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

              

              <strong>align-items</strong>属性（垂直方向对齐）

              align-items属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch; 

              • flex-start：交叉轴的起点对齐。

              

              • flex-end：交叉轴的终点对齐。

              

              • center：交叉轴的中点对齐。

              

              • baseline : 项目的第一行文字的基线对齐。

              

              • stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

              

              <strong>align-content</strong>属性

              align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch; 

              • flex-start：与交叉轴的起点对齐。

              

              • flex-end：与交叉轴的终点对齐。

              

              • center：与交叉轴的中点对齐。

              

              • space-between

              🎜🎜flex-flow🎜🎜flex-flow 속성은 flex-direction 속성이고 flex -wrap 속성의 약어로, 기본값은 row nowrap입니다. 🎜🎜<strong>justify-content</strong> 속성(가로 정렬)🎜🎜justify-content: flex-start | end | center | space-around 🎜🎜🎜🎜flex-start: 왼쪽 정렬🎜
            🎜🎜🎜🎜🎜flex -end: 오른쪽 정렬🎜
          🎜🎜🎜🎜🎜center: Centered🎜
        🎜🎜🎜🎜🎜space-between: 양쪽 끝 정렬 , 항목 간의 간격은 동일합니다. 🎜
      🎜🎜🎜🎜🎜space-around: 각 항목의 양쪽 공간이 동일합니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다. 🎜
    🎜🎜🎜<strong>align-items</strong>속성(세로 정렬)🎜🎜align-items 코드> 속성은 항목이 교차축에 정렬되는 방식을 정의합니다. <code>align-items: flex-start | flex-end | center | 기준선 🎜🎜🎜🎜flex-start: 교차축의 시작점을 정렬합니다. 🎜
  🎜🎜🎜🎜🎜flex-end: 교차축의 끝점을 정렬합니다. 🎜

🎜🎜🎜🎜🎜center: 교차축의 중간점을 정렬합니다. 🎜

🎜🎜🎜🎜🎜baseline: 항목 텍스트 첫 줄의 기준선 정렬입니다. 🎜🎜🎜🎜🎜🎜stretch(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다. 🎜🎜🎜🎜<strong>align-content</strong>속성🎜🎜align-content속성 정의 여러 정렬 축. 프로젝트에 축이 하나만 있는 경우 이 속성은 효과가 없습니다. align-content: flex-start | flex-end | center | space-around | 스트레치 🎜🎜🎜🎜 시작점을 정렬합니다. 🎜🎜🎜🎜🎜🎜flex-end: 교차축의 끝점에 맞춰 정렬됩니다. 🎜🎜🎜🎜🎜🎜center: 교차축의 중간점에 맞춰 정렬됩니다. 🎜🎜🎜🎜🎜🎜space-between: 교차축의 양쪽 끝에 정렬하고 축 사이의 간격이 균등하게 분포됩니다. 🎜

• space-around: 각 축의 양쪽 간격이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线- 与边框的间隔大一倍。

• stretch（默认值）：轴线占满整个交叉轴。

项目的属性

也就是flex container，它的所有子元素的属性

• order，排序

• flex-grow，拉伸

• flex-shrink，挤压

• flex-basis， 固定尺寸

• flex，grow shrink basis的缩写

• align-self，重写了父级的align-items对齐方式

<strong>order</strong> 属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

<!-- order为-1 排在最前 -->
<div style="order:-1">3</div>

<strong>flex-grow</strong>属性

flex-grow属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。就是是否拉伸

<div   style="max-width:90%">1</div>
<div>1</div>
<div style="flex-grow:5">2</div>
<div style="flex-grow:1">1</div>

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

<strong>flex-shrink</strong>属性

flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。排不下去的时候，他会挤压变形，死也要排下去。负值对该属性无效

<div   style="max-width:90%">0</div>

<strong>flex-basis</strong>属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

<div   style="max-width:90%">100px</div>

<strong>flex </strong>属性

flex属性是flex-grow,flex-shrink和flex-basisauto (1 1 auto)和none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

.test {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
}

/* 等同于 */
.test {
    flex: 1 1 100px;
}

`

<strong>align-self</strong>属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self

stretch(기본값): 축이 전체 교차 축을 차지합니다.

🎜🎜 🎜

프로젝트 속성

🎜즉, 플렉스 컨테이너, 모든 하위 요소의 속성🎜🎜🎜🎜order, sorting🎜🎜🎜 🎜flex-grow, Stretch🎜🎜🎜🎜flex-shrink, squeeze🎜🎜🎜🎜flex-basis, 고정 크기🎜🎜 🎜🎜flex는 grow Shrink Basis🎜🎜🎜🎜align-self의 약어이며 상위 항목의 align-items Alignment🎜를 다시 작성합니다. 🎜🎜🎜<strong>order</strong> 속성🎜🎜order속성은 항목이 정렬되는 순서를 정의합니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다. 🎜🎜 🎜

<div   style="max-width:90%">5</div>

🎜<strong>flex-grow</strong>속성🎜🎜flex-grow 속성은 항목의 확대 비율을 정의하며 기본값은 0 즉, 남은 공간이 있으면 확대되지 않습니다. 스트레칭 여부입니다🎜🎜🎜rrreee🎜모든 항목의 flex-grow 속성이 1인 경우 남은 공간(있는 경우)을 균등하게 나눕니다. 한 항목의 flex-grow 속성이 2이고 다른 항목이 1인 경우 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다. 🎜🎜<strong>flex-shrink</strong>속성🎜🎜flex-shrink 속성은 항목의 수축 비율을 정의합니다. 기본값 은 1 입니다. 즉, 공간이 부족하면 항목이 축소됩니다. 배출되지 못할 때에는 압착되어 변형되어 배출되어 사망하게 됩니다. 이 속성에는 음수 값이 유효하지 않습니다🎜🎜🎜rrreee🎜<strong>flex-basis</strong>속성🎜🎜flex-basis 속성은 초과 공간이 할당되기 전에 프로젝트가 차지하는 기본 공간(기본 크기)에 정의됩니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다. 🎜🎜 🎜rrreee 🎜<strong>flex </strong>속성🎜🎜flex 속성은 flex-grow입니다.flex-shrink 및 flex-basis 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다. 이 속성에는 auto(1 1 자동) 및 none(0 0 자동)이라는 두 가지 바로가기 값이 있습니다. 🎜🎜브라우저가 관련 값을 추론하므로 세 가지 별도의 속성을 별도로 작성하는 대신 이 속성을 먼저 사용하는 것이 좋습니다. 🎜rrreee🎜<strong>align-self</strong>속성🎜🎜align-self 속성을 ​​사용하면 단일 항목이 다른 항목과 다를 수 있습니다. items 정렬 방법은 align-items 속성을 ​​재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 ​​상속한다는 의미입니다. 상위 요소가 없으면 stretch와 같습니다. 코드>. 🎜🎜<code>align-self: auto | flex-start | flex-end | center | Stretch;🎜🎜🎜🎜rrreee🎜추천 학습: 🎜CSS3 비디오 튜토리얼🎜🎜

위 내용은 CSS3를 사용하여 간단한 페이지 레이아웃을 만드는 방법을 단계별로 가르칩니다(자세한 코드 설명).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!