主页 / 问题 / 1193928
Accepted
MrYogurt
Asked:2021-10-22 22:32:17 +0800 CST2021-10-22 22:32:17 +0800 CST

帮助对齐容器

  • 772

我有一棵树

.allContainers {
  display: flex;
  justify-content: center;
}

.opNames {
  display: inline-block;
}
<div className="allContainers">
            <div className="opNames">
                <div>
                    <span>...</span>
                </div>
                <div>
                    <span>...</span>
                </div>
                <div>
                    <span>...</span>
                </div>
            </div>
            <div>
                <div>
                    <span>...</span>
                </div>
            </div>
            <div>
                <div>
                    <span>...</span>
                </div>
            </div>
        </div>

我需要水平拉伸 allContainers 的全部内容，以便框始终居中并在屏幕宽度变窄时向下。此刻，容器的位置使得 opNames 块垂直伸展，其余的上升到它的右侧，容器居中，但缩小时不要向下跳：

在此处输入图像描述

css

1 个回答

  1. Best Answer

    据我了解，如果指定了所有参数，则 flexbox 的通常行为。尝试运行示例并通过抓住右下角来调整容器的大小：

    .allContainers {
  resize: both;
  overflow: hidden;
  box-shadow: 0 0 3px red;
}

.opNames {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.opNames > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin: .25em; padding: .9em 1em;
  box-shadow: inset 0 0 3px blue;
}
    <div class="allContainers">
  <div class="opNames">
    <div><span>.1.</span></div>
    <div><span>.2.</span></div>
    <div><span>.3.</span></div>
    <div><span>.4.</span></div>
    <div><span>.5.</span></div>
  </div>
</div>

    • 2

相关问题