css 如何在flex容器中内联+ Package 元素及其子元素？

zqdjd7g9 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(152)

我需要内联显示一些元素，这样当它们填充视口宽度时就可以换行。我更喜欢使用flex with --简单易维护，间隙定义清晰--而不是内联或浮动--你需要差距使用边距，然后使用负边距避免难看的换行...
问题是当要对齐的项嵌套在不同的父项上时，我无法执行此操作。要对齐的标记示例：

div Package 器：
一些相关项目的ul列表
li项
li项
span项不在列表中
span项不在列表中

我附上了一个演示，结构被重复了3次，每一次都提供了更小的宽度来展示项目是如何 Package 的。ul完美地表现为一个内联元素，直到它必须 Package ，然后它表现为一个块元素。

div {
    border: 1px solid blue; /* for easier debugging */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px; /* just visual separation between the 3 examples */
}

div:nth-of-type(2) {
    max-width: 450px; /* stretcher just to show how items wrap */
}

div:nth-of-type(3) {
    max-width: 250px; /* stretcher just to show how items wrap */
}

ul {
    border: 1px solid green; /* for easier debugging */
    display: inline-flex;
    flex-wrap: wrap;  
    gap: 20px;
}

li, span {
    border: 1px solid red; /* for easier debugging */
    display: inline;
}

<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

<!-- structure repeats 3 times -->

<p>This wraps okay</p>
<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

<p>The UL pushed next inline elements to a new line :(</p>
<div>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
  <span>Action 1</span>
  <span>Action 2</span>
  <span>Action 3</span>
</div>

css

来源：https://stackoverflow.com/questions/75225576/how-to-inlinewrap-elements-and-their-children-in-a-flex-container

2条答案

按热度按时间

vsaztqbk1#

使用显示屏：属性，该属性允许将子元素视为父容器的直接子元素。

ul {
    display: contents;
}

也可以使用显示器：li和span元素上的内联块，而不是显示：允许它们有自己的布局。你也可以使用空格：在ul上加nowrap以防止它中断到新行。

li, span {
    display: inline-block;
}

ul {
    white-space: nowrap;
}

赞(0）回复(0）举报 2023-01-27

5sxhfpxr2#

* {
    /* just for reset and for remove all margins and paddings */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

div {
    border: 1px solid blue;
    /* for easier debugging */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
    /* just visual separation between the 3 examples */
}

div:nth-of-type(2) {
    max-width: 450px;
    /* stretcher just to show how items wrap */
}

div:nth-of-type(3) {
    /* max-width: 250px; */
    max-width: fit-content; 
    /* is like 488px, but is resizable*/
    /* you wrong, the ul by default doesn't 
    push to next line any elements, 
    you have did a static width 
    of maximum 250px...*/
    /* stretcher just to show how items wrap */
}

ul {
    border: 1px solid green;
    /* for easier debugging */
    display: inline-flex;
    flex-wrap: wrap;
    gap: 20px;
}

li, span {
    border: 1px solid red;
    /* for easier debugging */
    display: inline;
}

<div>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
        <span>Action 1</span>
        <span>Action 2</span>
        <span>Action 3</span>
    </div>

    <!-- structure repeats 3 times -->

    <p>This wraps okay</p>
    <div>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
        <span>Action 1</span>
        <span>Action 2</span>
        <span>Action 3</span>
    </div>

    <p>The UL pushed next inline elements to a new line :(</p>
    <div>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
        </ul>
        <span>Action 1</span>
        <span>Action 2</span>
        <span>Action 3</span>
    </div>

你已经做了一个"静态"宽度的第二个孩子的最大值（250px），然后，他们不能 Package 了，因为他们已经 Package 。

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何在flex容器中内联+ Package 元素及其子元素？

2条答案

相关问题

热门标签

最新问答