html – 如何使用flexbox将网页划分为四个部分？

概述如何使用d性框将网页分成四个相等的部分？像这个网站的东西 – www.rileyjshaw.com 列应该能够在较小的视图端口上相互堆叠. 编辑/更新： 到目前为止,我已经尝试过这个 – 我应该改变线高吗？如何实现不同的块？ /* Grid */.column { flex-basis: 100%; width: 50%; height: 50%; line-height: 2 如何使用d性框将网页分成四个相等的部分？像这个网站的东西 – www.rileyjshaw.com

列应该能够在较小的视图端口上相互堆叠.

编辑/更新：

到目前为止,我已经尝试过这个 –
我应该改变线高吗？如何实现不同的块？

/* GrID */.column {  flex-basis: 100%;  wIDth: 50%;  height: 50%;  line-height: 200px;}@media screen and (min-wIDth: 800px) {  .row {    display: flex;    flex-direction: row;    flex-wrap: nowrap;  }  .column {    flex: 1;  }  ._25 {    flex: 2.5;  }  ._5 {    flex: 5;  }}/* Style */body {  Font-family: 'Lato',sans-serif;  Font-size: 1.3em;  color: #ccc;  background: #000;  /*@R_502_5553@-bottom: 70px;*/}.column {  /* padding: 15px;  border: 1px solID #666;  @R_502_5553@: 5px 0;*/  background: #343436;}main {  max-wIDth: 1200px;  @R_502_5553@: 0 auto;}h1,h2 {  text-align: center;}

<div >  <div >    50%  </div>  <div >    50%  </div></div><div >  <div >    50%  </div>  <div >    50%  </div></div>

解决方法 您可以简化代码并获得所需的输出.在这里,我删除了行并使用了一个容器.这种结构的主要好处是,如果您认为有必要,可以改变列的顺序.

我也选择使用flex-basis而不是flex-grow来使它们保持50％的宽度,无论其内容大小如何.

在更宽的屏幕上,使用媒体查询,将列设置为50％宽,并将容器设置为：flex; flex-wrap：wrap;.

在较窄的屏幕上,以及作为块元素,它们默认堆叠在一起

HTML,body {  height: 100%;  @R_502_5553@: 0;}.container {  height: 100%;}.column {  height: 25%;}@media screen and (min-wIDth: 600px) {  .container {    display: flex;    flex-wrap: wrap;  }  .column {    flex-basis: 50%;    height: 50%;  }}/* general styles */body {  Font-family: 'Lato',sans-serif;  Font-size: 1.3em;  color: #ccc;  background: #000;  /*@R_502_5553@-bottom: 70px;*/}.column {  padding: 15px;  /*border: 1px solID #666;*/  Box-sizing: border-Box;}.column:nth-child(1) {  background: #5c9;}.column:nth-child(2) {  background: #fb0;}.column:nth-child(3) {  background: #39f;}.column:nth-child(4) {  background: #f33;}main {  max-wIDth: 1200px;  @R_502_5553@: 0 auto;}h1,h2 {  text-align: center;}

<div >  <div >    50%  </div>  <div >    50%  </div>  <div >    50%  </div>  <div >    50%  </div></div>

如果您仍然需要原始标记结构,这里也是一个示例

HTML,body {  height: 100%;  @R_502_5553@: 0;}.row {  height: 50%;}.column {  height: 50%;}@media screen and (min-wIDth: 600px) {  .row {    display: flex;  }  .column {    flex-basis: 50%;    height: 100%;  }}/* general styles */body {  Font-family: 'Lato',sans-serif;  Font-size: 1.3em;  color: #ccc;  background: #000;  /*@R_502_5553@-bottom: 70px;*/}.column {  padding: 15px;  /*border: 1px solID #666;*/  Box-sizing: border-Box;}.row:nth-child(1) .column:nth-child(1) {  background: #5c9;}.row:nth-child(1) .column:nth-child(2) {  background: #fb0;}.row:nth-child(2) .column:nth-child(1) {  background: #39f;}.row:nth-child(2) .column:nth-child(2) {  background: #f33;}main {  max-wIDth: 1200px;  @R_502_5553@: 0 auto;}h1,h2 {  text-align: center;}

<div >  <div >    50%  </div>  <div >    50%  </div></div><div >  <div >    50%  </div>  <div >    50%  </div></div>

根据评论更新

使列的内容居中可以完成：

> FlexBox – https://jsfiddle.net/0ns6ofcp/

.column {  height: 25%;    display: flex;                         /*  added  */  justify-content: center;               /*  hor. center  */  align-items: center;                   /*  ver. center  */}

>转型 – https://jsfiddle.net/0ns6ofcp/1/

<div >  <div>50%</div></div>.column {  @R_419_4612@: relative;                 /*  added property  */  height: 25%;  }.column > div {                       /*  added rule  */  @R_419_4612@: absolute;  left: 50%;  top: 50%;  transform: translate(-50%,-50%);}

@H_301_69@ 总结

以上是内存溢出为你收集整理的html – 如何使用flexbox将网页划分为四个部分？全部内容，希望文章能够帮你解决html – 如何使用flexbox将网页划分为四个部分？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。