问题：
如何在不同的div flex容器中水平对齐bootstrap flex项目
东方高洁
我想知道是否有一种有效的方法来对齐不同的灵活项目（！）div flex容器，使flex项具有相同的宽度，如下所示：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary" style="width: 130px">short</div>
<div class="p-1 bg-secondary" style="width: 110px">mediuuum</div>
<div class="p-1 bg-info" style="width: 80px">loooooong</div>
</div>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary" style="width: 130px">looooooooooong</div>
<div class="p-1 bg-secondary" style="width: 110px">short</div>
<div class="p-1 bg-info" style="width: 80px">mediuuum</div>
</div>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary" style="width: 130px">mediuuum</div>
<div class="p-1 bg-secondary" style="width: 110px">looooooooong</div>
<div class="p-1 bg-info" style="width: 80px">short</div>
</div>笔记：
- 我必须在一个循环中呈现flex div（这是引导警报），一个接一个（因此只有在最后才清楚应用于水平对齐列的宽度）
- 这是一个简化的例子。实际上，弹性项包含不同的长度
这是在不进行自定义宽度计算的情况下呈现弹性项的方式：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary">short</div>
<div class="p-1 bg-secondary">mediuuum</div>
<div class="p-1 bg-info">loooooong</div>
</div>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary">looooooooooong</div>
<div class="p-1 bg-secondary">short</div>
<div class="p-1 bg-info">mediuuum</div>
</div>
<div class="d-flex alert p-0 mb-2">
<div class="p-1 bg-primary">mediuuum</div>
<div class="p-1 bg-secondary">looooooooong</div>
<div class="p-1 bg-info">short</div>
</div>也许有一个“开箱即用”的功能，它以一种不太“粗俗”的方式处理这个问题？
共有1个答案
满子实
这是一种表格布局，而不是flexbox布局：
html prettyprint-override"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<div class="d-table">
<div class="d-table-row">
<div class="d-table-cell p-1 bg-primary ">short</div>
<div class="d-table-cell p-1 bg-secondary">mediuuum</div>
<div class="d-table-cell p-1 bg-info">loooooong</div>
</div>
<div class="d-table-row">
<div class="d-table-cell p-1 bg-primary">looooooooooong</div>
<div class="d-table-cell p-1 bg-secondary">short</div>
<div class="d-table-cell p-1 bg-info">mediuuum</div>
</div>
<div class="d-table-row">
<div class="d-table-cell p-1 bg-primary">mediuuum</div>
<div class="d-table-cell p-1 bg-secondary">looooooooong</div>
<div class="d-table-cell p-1 bg-info">short</div>
</div>
</div>
类似资料：
-
这里的初学者。出于某种原因，在我编码的网站上，未来的按钮在导航栏上没有水平对齐。我正在使用flexbox，但即使如此，它也没有像我希望的那样对齐它们。代码中似乎也没有任何问题。 右侧按钮似乎比左侧按钮低约5px。在这里我完全不知所措，我的代码中似乎没有任何错误导致这种情况。应该修复它的Flexbox标记也不会做任何事情，例如
-
问题内容： 由于某些原因，我的div不会在包含div的水平居中： 有时有一个行div，其中只有一个块div。我究竟做错了什么？ 问题答案： 要实现您想要做的事情： 考虑使用代替。
-
问题内容： 我需要居中对齐水平菜单。 我尝试了各种解决方案，包括/ / 等等的组合，但是没有成功。 这是我的代码： 更新 我知道如何中心对齐的内部。可以使用Sarfraz的建议来完成。但是列表项仍然浮动在内。 我需要Java语言来完成此操作吗？ 问题答案： 前提很简单，基本上只涉及一个无宽度的浮动包装，该浮动包装浮动到左侧，然后从屏幕上移到左侧的宽度位置。左：-50％。接下来，将嵌套的内部元素反转
-
是否有一种方法可以以这种方式对齐子项:[i][i]_______[i][i][i]，而不管每个组中有多少项？
-
text-align-last属性用于定义块级容器中，行内元素的最后一行内容的水平对齐方式，可选值有 auto | left | center | right | justify | start | end | start | end，默认值为 auto。 除 auto外，其它取值与 text-align 属性取值的含义相同。auto 表示使用 text-align 的设定（例外情况，text-a
-
在一个块级容器中，当一行中的行内级框的总宽度，小于容器的宽度时，通过 text-align属性来指定这些行内级框在行中的水平分布。 事实上，text-align属性是通过指定行框与哪个点对齐，来决定行内级框在行中如何进行水平分布。可选值有 left | center | right | justify | start | end，默认值为start。不同取值的含义见表 3‑3： 表 3-3 tex