flex 容器中的元素没有包装

的元素

关注

发信

关注(28)粉丝(399)

flex 容器中的元素没有包装

本文介绍了flex 容器中的元素没有包装的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

当我尝试在 flex 容器中插入块元素时，它们都保持在同一行上，就好像它们是内联块一样.

我希望第一个 div 位于同一行，最后一个位于第二行.遗憾的是，这似乎不起作用.

有人知道吗?


<div style="display: inline-block">这是一个内联块元素
<div style="display: inline-block">这是一个内联块元素

<div style="display: block">这是一个块元素

解决方案

Flex 容器的初始设置是 flex-wrap: nowrap.这意味着 flex 项被强制保留在一行中.

您可以使用 flex-wrap: wrap 覆盖默认值.

在弹性布局中忽略弹性项目的display值.

一个 flex 容器，它是一个带有 display: flex 或 display: inline-flex 的元素，建立一个 flex 格式上下文.虽然类似于块格式上下文，有区别.

一个区别是 flex 容器的子容器忽略 display 属性.

另一个区别是，在 flex 容器中，边距不会折叠，并且 float 和 clear 属性不起作用.

Flex 容器还带有几个默认设置.其中:

justify-content: flex-start - flex 项目将堆叠在行首
flex-shrink: 1 - 允许伸缩项目收缩并且不会溢出容器
align-items:stretch - 弹性项目将扩展以覆盖容器的横向尺寸
flex-direction: row - 弹性项目将水平对齐
flex-wrap: nowrap - flex 项目被迫保持在一行中

注意最后两项.

Flex 项目会排成一排，不能换行.

如果你想在第一行有两个 flex 项目，在第二行有第三个项目，用 flex-wrap: wrap 允许容器是多行的.

.container {显示:弹性；flex-wrap: 包裹;}.盒子 {弹性:0 0 45%；高度:50px；边距:5px；背景颜色:浅绿色；边框:1px 实心 #ccc；}


<div class="box"></div><div class="box"></div><div class="box"></div>

此外，如果您希望 flex 容器内联显示，请使用 display: inline-flex 而不是 display: flex.这些相当于 display: inline-block 和 display: block.

When I try to insert block elements in a flex container, they all stay on the same line as if they were inline-blocks.

I would like the two first div's to be on the same line, and the last one to be on a second line. Sadly, that doesn't seem to work.

Anyone have any idea ?

<div style="display: flex">
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: block">
    This is a block element
  </div>
</div>

解决方案

An initial setting of a flex container is flex-wrap: nowrap. This means flex items are forced to remain in a single line.

You can override the default with flex-wrap: wrap.

The display value of flex items is ignored in flex layout.

A flex container, which is an element with display: flex or display: inline-flex, establishes a flex formatting context. Although similar to a block formatting context, there are differences.

One difference is that children of a flex container ignore the display property.

Another difference is that, in a flex container, margins don't collapse, and the float and clear properties have no effect.

A flex container also comes with several default settings. Among them:

justify-content: flex-start - flex items will stack at the start of the line
flex-shrink: 1 - flex items are allowed to shrink and will not overflow the container
align-items: stretch - flex items will expand to cover the cross-size of the container
flex-direction: row - flex items will align horizontally
flex-wrap: nowrap - flex items are forced to stay in a single line

Note the last two items.

Flex items will line up in a row and cannot wrap.

If you want to have two flex items on the first line, and a third item on the second line, allow the container to be multi-line with flex-wrap: wrap.

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 45%;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Also, if you want flex containers to display inline, use display: inline-flex not display: flex. These are comparable to display: inline-block and display: block.

这篇关于flex 容器中的元素没有包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-02 02:41

​​的元素

flex 容器中的元素没有包装

问题描述

的元素