标签: flexbox

我想用 Flexbox 将代码中的某些内容居中。它适用于所有其他元素，只有这里似乎出了问题。有人有想法吗？

.answer {
  text-shadow: 0 0 2px gr;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 20px;
  border: 5px solid black;
  border-radius: 5px;
  width: 50%;
}

<section class="answer">
  <p>Answer</p>
</section>

这就是它在我的实时服务器中显示的方式

我的弹性容器的左右弹性基础均为 50%。现在我想实现左 Flex 在第一行有两个输入，每个输入在单独的行中，如何设计布局？

有谁知道什么可能导致Firefox闪屏？它会在短时间内变黑.我认为这是"回流",但我无法弄清楚是什么导致了它.

我尝试过禁用转换,自定义字体,渐变,但它仍然会发生.

它可以是柔性盒吗？因为我到处都在使用它们,并且在我切换到柔性盒后我发现FF有些滞后.

在这个页面上,有一些员工照片.

在纵向模式的iPad上,员工照片在右侧被切断.

我不介意它们被切断,但我希望它们对齐中心,而不是左对齐.

请注意,我希望图像尺寸相同,只是向左移动对齐以使其居中,以便面部显示在图像边界的中间.

我从这个问题尝试了以下解决方案:

.ult-ib-effect-style13.ult-ib2-min-height img {
    display:block;
    margin:auto;
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    text-align: center; 
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    display: flex;
    justify-content: center;
}

但这些都不起作用.

我刚开始使用 FLEXBOX，对使用桌面和移动设备的布局有疑问。

我正在使用标签和数据（不在表单上）显示信息。

在桌面上，我希望它显示如下：

标签-------标签--标签------标签

数据--------数据--------数据------数据

在桌面上，标签和数据将是基于元素数量的百分比。

但是，在手机上，我希望它显示如下：

标签------ 数据-------

标签------ 数据-------

标签------数据-------

标签------ 数据-------

标签------数据-------

在移动设备上，我希望标签和数据的宽度为 25% 和 75%。

不确定在 HTML 上是否应该像这样布局

<div class="container">
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
   <div class="label">Label</div>
   <div class="data">Data</a>
</div>

或者

<div class="container">
   <div class="label">label</div>
   <div class="label">label</div>
   <div class="label">label</div>
</div>
<div class="container">
   <div class="data">data</div>
   <div class="data">data</div>
   <div class="data">data</div>
</div>

任何指导都会很棒！谢谢！

你好，目前我正在学习 flexbox，我看过很多教程，但我不知道 flex 属性有什么作用？一些解释它的作用的解释和链接将非常有帮助。谢谢。

我正在尝试使用以下功能创建一行元素:

1. 在内联块容器内(需要在其旁边有内容)
2. 宽度都一样
3. 自动调整大小足以容纳最宽的元素而不会溢出
4. 是自动调整大小要足够窄,只包含最宽的元素,没有它溢出

我目前的努力是使用flexbox并且无法满足所有这些条件.我最近的尝试(到目前为止在Chrome中测试)低于,但条件3未达到.

有什么我想念的吗？或者是否有可行的替代方法？

实例

div {
  display: inline-block;
}

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  flex: 1;
}

a {
  display: block;
  padding: 1em;
  border: solid black 1px;
}

<div>
  <ul>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">barrrrrrrrr</a>
    </li>
    <li>
      <A href="/">foooooooooooo</a>
    </li>
    <li>
      <A href="/">foo</a>
    </li>
    <li>
      <A href="/">hello&nbsp;world</a>
    </li>
  </ul>
</div>

(我没有在此测试中使用浏览器兼容性供应商前缀版本,因此您可能必须选择具有良好Flexbox支持的浏览器).