CSS3의 flexbox는 수평, 수직 중앙 정렬 및 3열 동일 높이 레이아웃을 어떻게 구현합니까?-HTML 튜토리얼-php.cn

요즘 CSS와 CSS3에 대한 기초지식을 공부하고 있는데 웹페이지를 열어보니 파이어폭스의 기본 홈페이지에 그런 것이 있다는 걸 발견했습니다.

첫 번째 CSS 속성을 이해하지 못했습니다. 그때부터 정보를 찾아보고 다양한 책을 읽기 시작했어요. 요즘 저는 Flexbox에 대한 간략한 소개를 제공할 목적으로 CSS3 Retractable 레이아웃 상자(Flexbox) 모델에 대한 나의 이해에 대한 블로그 게시물을 작성하고 있습니다.

다음 콘텐츠는 다음과 같은 하위 섹션으로 구분됩니다.

1. CSS3의 Flexbox에 대해 숙지해야 할 개념

2. Flexbox는 가로 및 세로 중앙 정렬을 구현합니다

3. 동일한 높이의 3개 열이 적용되고 바닥글 영역이 하단 레이아웃에 고정됩니다.

1. CSS3의 Flexbox에 대해 알아야 할 사항

　3열 동일 높이 적응형 레이아웃과 수평 및 수직 중앙 정렬을 위해서는 CSS3의 Flexbox 기본 개념에 대한 이해가 필요하므로 다음에서는 Flexbox 개념에 대해 간략하게 소개하겠습니다. 예를 들어보세요. 나는 어떤 지식을 배우든 개념을 이해하는 것이 매우 중요하다고 항상 믿어 왔습니다.

　a: 유연한 컨테이너: display 속성을 통해 요소를 flex 또는 inline-box(표준 버전)로 설정하는 것을 말합니다.

b: Flex 항목: Flex 항목은 Flex 컨테이너의 하위 요소입니다. Flex 컨테이너의 콘텐츠에는 0개 이상의 Flex 항목이 있습니다. Flex 컨테이너의 각 하위 요소는 Flex 항목(익명 Flex 항목이라고 하는 텍스트 포함)이 됩니다.

c: 텔레스코픽 흐름 방향: 텔레스코픽 컨테이너의 주축 방향을 말하며, 이는 x축 방향으로 이해될 수 있습니다. 확장 가능한 흐름의 방향은 주로 flex-direction 속성(표준 버전)을 통해 설정되며 기본값은 row입니다.

d: 플렉스 라인 랩: 플렉스 항목이 플렉스 컨테이너의 플렉스 컨테이너를 오버플로하는 경우가 있습니다. 플렉스 컨테이너 속성에서 flex-wrap 속성은 주로 플렉스 컨테이너의 래핑 여부를 설정하는 데 사용됩니다. 기본값은 nowrap입니다.

e: 확장성: Flex 항목을 정의하면 Flex 컨테이너의 너비나 높이가 변경되어 사용 가능한 공간을 채울 수 있습니다. Flex 컨테이너의 추가 공간을 해당 Flex 항목에 할당하거나 축소하여 Flex 항목의 오버플로를 방지할 수 있습니다.

2. Flexbox는 가로 및 세로 중앙 정렬을 구현합니다

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}<span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}<span style="color: #800000;">
.content </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> lightblue</span>;<span style="color: #ff0000;">
  text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -moz-box-pack</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
}

로그인 후 복사

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="content"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>水平垂直居中对齐<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

먼저 html과 body의 너비와 높이를 100%로 설정하여 너비와 높이를 동일하게 만듭니다. 그렇지 않으면 측면 주축 정렬(box-pack)과 측면 축 정렬(box-align)을 수행합니다. Flex 컨테이너의 추가 공간을 배포하기 전에는 확장 가능한 프로젝트를 사용할 수 없습니다.

그런 다음 몸체를 확장 가능한 컨테이너로 만들고 표시 속성을 box로 설정하고 box-pack 및 box-align을 설정하여 주축 정렬과 측면 축 정렬을 제어하고 해당 속성 값을 center로 설정합니다.

마지막으로 .content 요소는 플렉스 컨테이너가 되므로 내부 텍스트 블록은 익명 플렉스 항목이 됩니다. 현재 .content 요소는 확장 가능한 컨테이너이자 확장 가능한 프로젝트입니다. 확장 가능한 컨테이너로 사용될 때 h1 요소는 확장 가능한 항목이고, 확장 가능한 항목으로 사용될 때 본문은 확장 가능한 컨테이너입니다. 또한 .content에 대해 box-align 및 box-pack을 설정하여 교차 축 정렬 및 기본 축 정렬을 제어합니다.

렌더링은 .cotent 요소와 h1 모두 중앙에 가로 및 세로로 정렬됩니다.

3. 동일한 높이의 3개 열이 적용되고 바닥글 영역이 하단 레이아웃에 고정됩니다.

　3열 레이아웃 방법에는 float + 퍼센트 너비로 구현할 수도 있고, 퍼센트로 인라인 블록을 사용하여 구현할 수도 있지만 바닥글을 만드는 것이 어렵습니다. 브라우저에 표시됩니다. 창 하단에 레이아웃이 표시됩니다. 여기서는 CSS3 3열 동일 높이 레이아웃만 소개합니다.

HTML 구조 없이는 레이아웃 효과를 얻을 수 없습니다.

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="header"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>头部<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="page"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="main"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>主内容<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-left"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>左边栏<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="sidebar-right"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>右边栏<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="footer"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>页脚<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

로그인 후 복사

머리글과 바닥글의 너비가 100%이고 왼쪽 및 오른쪽 열의 너비가 200px이며 메인 콘텐츠가 너비에 적응한다고 가정합니다.

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}<span style="color: #800000;">
#header, #footer </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #ccc</span>;
}<span style="color: #800000;">
#footer </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;
}<span style="color: #800000;">
#sidebar-left, #sidebar-right </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 200px</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #f36</span>;
}

로그인 후 복사

여기서 본문에 대한 box-sizing 설정은 상자 모델의 너비 = 콘텐츠 너비 + 테두리 + 패딩이 되도록 하여 패딩 값을 설정할 때 너비의 너비를 계산할 필요가 없도록 합니다.

다음으로 확장 가능한 레이아웃 상자 모델 상자(이전 버전도 계속 사용할 수 있음)를 사용하여 #page 요소를 확장 가능한 컨테이너로 만듭니다. 컨테이너.

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;
}

로그인 후 복사

　　上面代码中，使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width，这里的#main元素的box-flex属性会失效，原因在于父容器没有宽度，自然无法填充伸缩容器的额外空间，（这里的额外空间指的是#page元素所占的面积，而不单单指宽度）。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器（Chrome，Safari）和Gecko内核（Firefox）不支持box-flex属性和box属性，所以必须添加厂商前缀。

　　上面实例中，需要修改一下主内容和左边栏，右边栏的排列方式，使用box-ordinal-group属性。

<span style="color: #800000;">#sidebar-right </span>{<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 3</span>;
}<span style="color: #800000;">
#main </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #e66</span>;<span style="color: #ff0000;">
  padding</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  margin</span>:<span style="color: #0000ff;"> 0 10px</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-ordinal-group</span>:<span style="color: #0000ff;"> 2</span>;
}

로그인 후 복사

　　上面代码中，使用了box-ordinal-group属性，这个属性是用于修改伸缩项目在伸缩容器中的显示顺序，默认值为1，也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。

　　至此，这个页面就已经做好了。但是出现了一个问题，就是页脚区域不会黏附在浏览器窗口可视区域底部，这让用户体验非常糟糕。

　　使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器，并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性（也就是#page元素）。也就是说，页脚区域前的div会变成一个伸缩项目，会根据伸缩容器的高度自适应填充伸缩容器的额外空间，也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

　　如果希望整个页面的布局要和浏览器窗口可视区域一样高，

　　首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置，body本身就没有高度，当然伸缩项目的伸缩性也就无法体现。

<span style="color: #800000;">html, body </span>{<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 100%</span>;
}

로그인 후 복사

　　其次，让body元素自身成为一个伸缩容器，并且设置伸缩流方向（box-orient）为vertical（旧版本中的属性）。

<span style="color: #800000;">body </span>{<span style="color: #ff0000;">
  -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-orient</span>:<span style="color: #0000ff;"> vertical</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;
}

로그인 후 복사

　　最后，设置页脚区域前的div（#page元素）中的box-flex属性，让其根据伸缩容器（这里是指body）的高度自适应伸缩容器body的额外空间，也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

<span style="color: #800000;">#page </span>{<span style="color: #ff0000;">
  margin-top</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 100%</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -moz-box</span>;<span style="color: #ff0000;">
  -moz-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -moz-box-align</span>:<span style="color: #0000ff;"> stretch</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;<span style="color: #ff0000;">
  -webkit-box-flex</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;">
  -webkit-box-align</span>:<span style="color: #0000ff;"> stretch</span>;
}

로그인 후 복사

　　上面代码中，#page元素本身是一个伸缩容器，现在变成伸缩项目。在伸缩布局盒模型中，伸缩项目在侧轴的对齐方式box-align（旧版本）默认值为stretch，（css中可不写box-align属性）致使#page元素的三个伸缩项目都会自动拉伸，不管内容高度有多少都具有伸缩容器#page的高度，从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。

完。

感谢大家的阅读。