如何有多个带有内容的方柱（flex，与 Bulma）

Question

我想显示可变数量的元素，其内容呈完美的圆形，对齐良好。为此，我使用 Bulma 及其 columns 和 box，如下所示：

<div class="columns is-centered is-vcentered is-8 is-variable">
  <div class="column is-2">
    <div class="box has-text-centered">
       A
    </div>
  </div>
  <div class="column is-2">
    <div class="box has-text-centered">
       B
       more text in this element
     </div>
  </div>
</div>

把盒子做成圆形很容易

.box {
  border-radius: 50% 50%;
}

.box::after {
  content: "";
  display: block;
  padding-bottom: 84.4%;
}

::after 元素技巧似乎是实现相对大小的正方形元素的方法（我不得不使用 83.4%，因为 .column.is-2 大致 16.6% 宽).但是，一旦盒子接收到内容，方形就会丢失。

我尝试了其他 ::before 和 ::after 技巧（例如 display:table）但无济于事。我也试过绝对设置after元素的位置

如何使列（或者可能更确切地说是框？）正方形？

Fiddle 在： https://jsfiddle.net/2tukdp8w/

当然，如果能保留所有 Bulma 舒适性（响应能力、列间距...），那就太好了。

Answer 1

您可能需要一个列表，也可能不需要，这取决于内容的含义。我很欣赏您尝试使用更少的元素而不是伪元素，但考虑将自定义元素作为 'not use' 和 un 语义 'div' 或一些东西 - 双赢。

<ul class="thing-list">
  <li class="thing">
    <circle-component>
      <span>Text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
  
  <li class="thing">
    <circle-component>
      <span>Longer text in circle</span>
    </circle-component>
  </li>
</ul>

从那里 - 有很多方法可以做到这一点。你可以使用 height: 0;底边距：50%；打字技巧，但在这种情况下，它可能会给你带来更多麻烦，而不是软绵绵的价值。

这里是使用 flex-box / 的设置，也是一个网格选项。不要害怕使用自定义元素！它们很容易阅读——好吧，现在是 2020 年了！ :)

我确信 Bulma 有一些巧妙的约定，但在这种情况下，我认为没有理由使用任何框架。 CSS 2020 年为我们提供了一组非常可爱的选择。

/* reset + project setup */
* {
  box-sizing: border-box; /* look this up if you don't already use it https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}


/* components FIRST */
circle-component {
  display: block; /* custom components are inline by default */
  width: 120px;
  /* one of the few places I would EVER set an explicit height or width */
  height: 120px; 
  border-radius: 50%;
  border: 1px solid red;
  display: flex;
  flex-direction: column; /* one way to do that... (center) */
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}


/* then... context */
.thing-list {
  display: flex; /* flex version */
  flex-direction: row;
  flex-wrap: wrap; /* let it break to the next line */
}

.thing-list.grid-version {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* depends on what you want to happen */
  border: 1px solid blue;
}

.thing-list .thing {
  padding: 10px; /* maybe */
}



/* you could totally use position absolute for the text if you want - but it's nice to not need that - and let the text flow naturally */

fiddle: https://jsfiddle.net/sheriffderek/Lbjcw8gp/

关于弹性盒模式的一些想法有助于巩固它们： Almost all of the UI layout comes down to just this

如何有多个带有内容的方柱（flex，与 Bulma）

How to have multiple square columns with content (flex, with Bulma)

html

css

flexbox

bulma