由于文本长度而导致网格/内联弯曲问题

Question

I've got a block grid of squares with text inside each. 我有一个正方形的方块网格，每个方块内都有文字。 Everything works fine when there is only one line of text. 仅一行文本时，一切正常。 More text in a square makes it move below the others and break the grid. 正方形中的更多文本使其移动到其他文本的下方，并破坏网格。

The other problem is that I would like one square to have an additional line of text at the top as shown by the class="notice" . 另一个问题是，我希望一个正方形的顶部有一行附加的文本，如class="notice" 。 But I can't get this to work either. 但是我也无法使它正常工作。

I've created a jsfiddle to show more clearly what the issue is. 我创建了一个jsfiddle，以更清楚地显示问题所在。 I've had a look through this guide on flexbox but can't seem to solve the issue, not sure if it is related. 我在flexbox上浏览了本指南，但似乎无法解决问题，不确定是否相关。 Any help is greatly appreciated for a newbie. 对于新手，任何帮助都将不胜感激。

 <body>
  <div class="container">
    <div class="products">
      <div class="product">
        <p>Apples</p>
       <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p class="notice">You won't find cheaper</p>
        <p>Best price you will find on grapes</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product" id="no">
        <p>Best price you will find on grapes, bananas, kiwis</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
      <div class="product">
        <p>Orange</p>
        <a href="#"><span class="link"></span></a>
      </div>
    </div>
  </div>
</body>

.products {
  text-align:center;
}

.product {
  background-color: red;
  display: inline-flex;
  height: 10em;
  margin-bottom: 10px;
  position: relative;
  width: 10em;
  justify-content:center;
  align-items:center;
}

.product p {
  color: black;
}

.product p.notice {
  font-size: 14px;
  color: yellow;
}

.link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.product:hover, div.product:focus {
  background-color: green;
}

Answer 1

Not sure why you need display: inline-flex for each of your product items. 不确定为什么需要display: inline-flex每个产品项的display: inline-flex 。 You could simply make the parent a flex container with display: flex , making all product items flex items. 您可以简单地使父对象成为具有以下display: flex的flex容器display: flex ，使所有产品项目都变为flex项目。

HTML (no changes) HTML （无变化）

CSS (adjusted sections only) CSS （仅调整部分）

.products {
    display: flex;                  /* establish primary flex container */
    flex-wrap: wrap;                /* enable flex items to wrap */
    justify-content: center;        /* center flex items horizontally, in this case */
}

.product {
    height: 10em;
    width: 10em;
    margin: 5px;
    position: relative;

    display: flex;                   /* establish nested flex container */
    flex-direction: column;          /* stack flex items vertically */
    justify-content: center;         /* center flex items vertically, in this case */
    align-items: center;             /* center flex items horizontally, in this case */
    background-color: red;
}

Revised Fiddle 修订的小提琴

Answer 2

inline-flex, inline-block,inline-table,inline, img, .. all of them stands on a baseline, you may use vertical-align: inline-flex，inline-block，inline-table，inline，img，..它们都位于基线上，您可以使用vertical-align：

.product {
  background-color: red;
  display: inline-flex;
  vertical-align:top; /* HERE */
  height: 10em;
  margin-bottom: 10px;
  position: relative;
  width: 10em;
  justify-content:center;
  align-items:center;
}

https://jsfiddle.net/382m8wzg/11/ https://jsfiddle.net/382m8wzg/11/

由于文本长度而导致网格/内联弯曲问题

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-02-13 22:19:48

解决方案2
0 2016-02-13 22:33:07

由于文本长度而导致网格/内联弯曲问题

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-02-13 22:19:48

解决方案2 0 2016-02-13 22:33:07

解决方案1
1 已采纳 2016-02-13 22:19:48

解决方案2
0 2016-02-13 22:33:07