构建Flexbox网格的问题 [英] Problems building a flexbox grid

问题描述

我试图用以下设计构建自己的flexbox：
$ b

我的html看起来像这样（我不想改变它）：

 < div class = 包装 > 
< div class =page-header>标题< / div> 
< h3 class =right_1> right_1< / h3> 
< div class =right_2> right_2< / div> 
< div class =left> form element< / div> 
< h3 class =right_3> right_3< / h3> 
< div class =right_4> right_4< / div> 
< / div> 
  

这是joomla联系页面的标准布局。我想改变设计，虽然没有改变HTML / PHP代码。

这是可能使用flexbox？

我可以用 @media 查询来制作 right_1 - right_4 移动到 left 在移动视图（< 800px或示例）？

我自己拿不到工作中，我总是以 right_1 - right_4 来代替堆叠在一起的总高度左边的部分。

解决方案

使用flexbox无法实现您想要的布局。原因在这里解释：

• 是可能为flex项目紧紧地对齐上面的项目？

然而，布局是相对简单的 CSS网格 。实际上，有许多方法可以用Grid构建布局。我将使用 <$ c

<$ c $>元素属性，它允许您使用ASCII艺术布局元素。

  .wrapper {display：grid;身高：100vh; grid-template-columns：1fr 1fr; grid-template-areas：标题标题left_right1left_right2left_right3left_right4} .page-header {grid-area：heading; } .right_1 {grid-area：right1; } .right_2 {grid-area：right2; } .right_3 {grid-area：right3; } .right_4 {grid-area：right4; } .left {grid-area：left_; } / *left是一个预先定义的CSS关键字，所以可能无法运行* / @ media（max-width：800px）{.wrapper {grid-template-columns：1fr; grid-template-areas：headingleft_right1right2right3right4}} / *非必要的装饰风格* /。page-header {background-color：red; } .right_1 {background-color：chartreuse; } .right_2 {background-color：aqua; } .right_3 {background-color：skyblue; } .right_4 {background-color：black;白颜色; } .left {background-color：cornsilk; } body {margin：0; } .wrapper> * {font-weight：bold; font-size：1.5em;边框：1px纯黑色;保证金：0;显示：flex; justify-content：center; align-items：center;}  

< div class = 包装 > < div class =page-header>标题< / div> < h3 class =right_1> right_1< / h3> < div class =right_2> right_2< / div> < div class =left> form element< / div> < h3 class =right_3> right_3< / h3> < div class =right_4> right_4< / div>< / div>




jsFiddle演示

本质上，它是如何工作的：

1. 我们用显示：网格建立一个块级网格


2. 使用 grid-template-columns：1fr 1fr 我们告诉网格创建两列。 fr 单位告诉容器消耗可用空间。它类似于flexbox的 flex-grow 属性。因此，两列将共享容器的全部宽度。
   
3. grid-template-areas 属性允许您布置命名的网格使用ASCII艺术创建布局的可视化表示。
   
4. 在较小屏幕的媒体查询中，我们删除一列并重新排列网格区域。





---

CSS栅格浏览器支持

• Chrome截至2017年3月8日全面支持（第57版）


• Firefox - 截至3月份全面支持2017年5月6日（版本52）
  
• Safari - 截至2017年3月26日的全面支持（10.1版）


• 16，2017（16版）


• IE11 - 不支持目前的规格;支持过时版本
http://caniuse.com/#search=grid



I'm trying to build myself a flexbox with the following design:

My html looks like this (and I would like to NOT change this):

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

This is the standard layout of the joomla contact page. I want to change the design though without altering html/php code.

Is that possible using flexbox?

And can I use @media queries to make right_1 - right_4 to move under left on mobile view (< 800px or example)?

I myself cannot get it to work, I always end up with right_1 - right_4 next to each other instead of them stacking to the total height of the left portion.

解决方案

The layout you want cannot be achieved with flexbox. The reasons are explained here:

• Is it possible for flex items to align tightly to the items above them?

However, the layout is relatively simple with CSS Grid.

There are, in fact, multiple methods for building the layout with Grid. I'll use the grid-template-areas property, which allows you to lay out your elements using ASCII art.

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 
     " heading heading "
     "  left_ right1   "
     "  left_ right2   "
     "  left_ right3   "
     "  left_ right4   "
}

.page-header { grid-area: heading; }
.right_1     { grid-area: right1;  }
.right_2     { grid-area: right2;  }
.right_3     { grid-area: right3;  }
.right_4     { grid-area: right4;  }
.left        { grid-area: left_;   } /* "left" is a pre-defined CSS keyword,
                                         so it may not work */
@media ( max-width: 800px ) {
  .wrapper { 
     grid-template-columns: 1fr;
     grid-template-areas: 
        " heading "
        "  left_  "
        "  right1 "
        "  right2 "
        "  right3 "
        "  right4 "
     }
}

/* non-essential decorative styles */
.page-header { background-color: red; }
.right_1     { background-color: chartreuse; }
.right_2     { background-color: aqua; }
.right_3     { background-color: skyblue; }
.right_4     { background-color: black; color: white; }
.left        { background-color: cornsilk; }
body         { margin: 0; }
.wrapper > * {
  font-weight: bold;
  font-size: 1.5em;
  border: 1px solid black;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrapper">
  <div class="page-header">Heading</div>
  <h3 class="right_1">right_1</h3>
  <div class="right_2">right_2</div>
  <div class="left">form element</div>
  <h3 class="right_3">right_3</h3>
  <div class="right_4">right_4</div>
</div>

jsFiddle demo

In essence, here's how it works:

1. We establish a block-level grid with display: grid.
2. With grid-template-columns: 1fr 1fr we are telling the grid to create two columns. The fr unit tells the container to consume available space. It's similar to flexbox's flex-grow property. So both columns will share the full width of the container.
3. The grid-template-areas property allows you to lay out named grid areas (that you have defined) to create a visual representation of your layout using ASCII art.
4. In the media query for smaller screens, we remove one column and re-order the grid areas.

---

Browser Support for CSS Grid

• Chrome - full support as of March 8, 2017 (version 57)
• Firefox - full support as of March 6, 2017 (version 52)
• Safari - full support as of March 26, 2017 (version 10.1)
• Edge - full support as of October 16, 2017 (version 16)
• IE11 - no support for current spec; supports obsolete version

Here's the complete picture: http://caniuse.com/#search=grid

这篇关于构建Flexbox网格的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！