时间戳

首页 > 解决方案 > CSS Flex（增长/收缩）来改变响应项目的对齐方式？

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

问题描述

我无法理解如何在 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。

标签： csstwitter-bootstrapbootstrap-4flexbox

解决方案

尝试如下：

<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>

推荐阅读