CSS Flex（增长/收缩）来改变响应项目的对齐方式？答案

【问题标题】：CSS Flex (Grow/Shrink) to shift responsive item alignment?CSS Flex（增长/收缩）来改变响应项目的对齐方式？
【发布时间】：2021-05-20 14:01:13
【问题描述】：

我无法理解如何在 Bootstrap (4.4) 中正确使用 flex-grow 和 flex-shrink 实用程序

我有一个包含 3 个<li> 元素的导航容器，使用移动优先的方法；我想完成以下工作：

移动布局 (sm)（所有<li>元素等间距（宽度33.3%）

   Element 1                                Element 2                                           Element 3

更大的设备 (md+)（2 个<li> 元素左对齐，第3 个<li> 右对齐）

   Element 1   Element 2                                                                        Element 3

代码：

<div class="d-flex align-items-center flex-fill">
            <ul class="nav list-unstyled list-inline d-flex flex-fill">
                    <li class="nav-item list-inline-item flex-fill">
                               Element 1
                    </li>
                    <li class="nav-item  list-inline-item  flex-fill">
                               Element 2
                    </li>
                    <li class="nav-item  list-inline-item  flex-fill">
                                Element 3
                    </li>
            </ul>
    </div>

使用 flex-fill 可以让移动布局正常工作。我无法让 flex-md-{grow|shrink} 缩小元素 1 并正确增长元素 2。

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

尝试如下：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="d-flex align-items-center flex-fill">
  <ul class="nav list-unstyled list-inline d-flex flex-fill justify-content-around justify-content-md-start">
    <li class="nav-item list-inline-item ">
      Element 1
    </li>
    <li class="nav-item  list-inline-item">
      Element 2
    </li>
    <li class="nav-item  list-inline-item ml-md-auto">
      Element 3
    </li>
  </ul>
</div>

【讨论】：