如何使用 flexbox 将网页分成四个部分？

Posted 2023-03-06

【中文标题】如何使用 flexbox 将网页分成四个部分？

【英文标题】：How to divide a webpage into four parts using flexbox?

【发布时间】：2018-01-28 07:54:27

【问题描述】：

如何使用 flex box 将网页分成四等份？像这个网站-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;
  /*margin-bottom: 70px;*/


.column 
  /* padding: 15px;
  border: 1px solid #666;
  margin: 5px 0;*/
  background: #343436;


main 
  max-width: 1200px;
  margin: 0 auto;


h1,
h2 
  text-align: center;

<div class="row">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>
<div class="row">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>

【问题讨论】：

您自己尝试过吗？

@Dekel 更新了问题。

【参考方案1】：

您可以简化代码并获得所需的输出。在这里，我删除了 row's 并使用了一个容器。这种结构的主要好处是，如果您认为有必要，您可以更改列的顺序。

我还选择使用 flex-basis 而不是 flex-grow 以使它们保持 50% 的宽度，无论其内容大小如何。

在更宽的屏幕上，使用媒体查询，将列的设置为 50% 宽，并将 container 设置为 display: flex; flex-wrap: wrap;。

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

html, body 
  height: 100%;
  margin: 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;
  /*margin-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;
  margin: 0 auto;


h1,
h2 
  text-align: center;

<div class="container">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>

---

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

html, body 
  height: 100%;
  margin: 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;
  /*margin-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;
  margin: 0 auto;


h1,
h2 
  text-align: center;

<div class="row">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>
<div class="row">
  <div class="column">
    50%
  </div>
  <div class="column">
    50%
  </div>
</div>

---

根据评论更新

居中列的内容可以通过i.e.来完成：

弹性盒 - 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 class="column">
  <div>50%</div>
</div>

.column 
  position: relative;                 /*  added property  */
  height: 25%;  

.column > div                        /*  added rule  */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);

【讨论】：

@Dekel 谢谢 :)

@LGSon 我无法在列内居中文本（水平和垂直）。我试过这个位置：绝对；最高：50%；左：50%；右边距：-50%；变换：翻译（-50%，-50%）

@uitwaa 既然您已经使用了 Flexbox，请将其也添加到 列，如下所示：jsfiddle.net/0ns6ofcp ...如果要使用 transform，请这样做： jsfiddle.net/0ns6ofcp/1

非常感谢！

【参考方案2】：

你可以从这里开始：

/* Grid */

.column 
  flex-basis: 100%;
  height: 50vh;

.row 
  display: flex;

.row:first-child .column:first-child 
  background: red;

.row:first-child .column:last-child 
  background: blue;

.row:last-child .column:first-child 
  background: green;

.row:last-child .column:last-child 
  background: black;

/* Style */
body 
  font-family: 'Lato', sans-serif;
  font-size: 1.3em;
  color: #ccc;
  background: #000;


.column 
  background: #343436;

<div>
  <div class="row">
    <div class="column">
      50%
    </div>
    <div class="column">
      50%
    </div>
  </div>
  <div class="row">
    <div class="column">
      50%
    </div>
    <div class="column">
      50%
    </div>
  </div>
</div>

【讨论】：

我猜这些不是不同的列。添加 ".column+.column background: blue;" 并将颜色应用于 2 cols 而不是 1

我不确定您所说的“不同的列”是什么意思。你能解释一下吗？

4 个具有不同颜色/内容的不同列

谢谢！随着视口大小的减小，如何将列相互堆叠？