Flex，使用wrap属性阻塞
Flex是一种CSS布局模型，用于创建灵活的盒子布局。它可以通过设置容器的display属性为flex来启用。在flex容器中，可以使用wrap属性来控制子元素的换行行为。
当设置wrap属性为wrap时，子元素会根据容器的宽度自动换行，以适应容器的大小。这意味着当容器的宽度不足以容纳所有子元素时，子元素会自动换行到下一行。
Flex布局的优势在于它提供了一种简单而强大的方式来创建响应式布局。通过使用flex容器和子元素的属性，可以轻松地实现各种布局需求，如水平居中、垂直居中、等分布局等。
使用Flex的wrap属性可以在以下场景中发挥作用：
- 响应式布局：当页面在不同设备上显示时，可以使用wrap属性来自动调整子元素的布局，以适应不同的屏幕尺寸。
- 列表布局：当需要显示一系列项目时，可以使用wrap属性来自动换行，以便在有限的空间内显示更多的项目。
- 网格布局：可以使用wrap属性来创建网格布局，使得子元素能够自动换行并填充整个容器。
- 导航菜单：当有大量的导航链接时，可以使用wrap属性来自动换行，以便在有限的空间内显示更多的链接。
腾讯云提供了一系列与Flex布局相关的产品和服务，包括：
- 腾讯云云服务器（CVM）：提供灵活的云服务器实例，可用于托管网站和应用程序，支持自定义的Flex布局。
- 腾讯云对象存储（COS）：提供安全可靠的对象存储服务，可用于存储和分发静态资源，支持在Flex布局中引用图片和其他文件。
- 腾讯云CDN加速：提供全球分布式的内容分发网络，可加速网站和应用程序的访问速度，支持在Flex布局中加载和分发静态资源。
- 腾讯云云函数（SCF）：提供事件驱动的无服务器计算服务，可用于处理和响应Flex布局中的动态请求。
更多关于腾讯云产品和服务的信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
我要把物品排成一列。
这是项目列表块和css。
const ItemListBlock = styled.div`
display: flex;
width: 90%;
flex-direction: row;
margin-top: 3rem;
flex-wrap: wrap;
`;
<ItemListBlock>
<div>
{items.map(item => (
<Item className="item" item={
浏览 1提问于2021-05-28得票数 0
回答已采纳
我在FortyTwo基础主题中使用了，这里提供了一个flexbox mixin，如下所示：
@mixin flex-order($number) {
order: #{$number};
}
@mixin flex-align($align) {
@if $align == 'start' or $align == 'end' {
align-items: flex-#{$align};
} @else {
align-items: #{$align};
}
}
@mixin flex-flow($direction: non
浏览 0提问于2017-12-19得票数 0
假设我有一个包含一些文本子项和一些inline-block子项的display: inline容器：
如果我给容器提供下面的CSS...(并将inline-block更改为inline-flex)
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
..。然后，它将文本元素视为自己的一个完整元素，并包装整个元素，而不是将其拆分。
有没有一种"flexbox“的方式来实现这一点，或者我真的必须退回到内联显示？
浏览 11提问于2018-01-15得票数 13
回答已采纳
我的组成部分：
import React from "react";
import "./homepage.styles.scss";
const Hompage = () => {
return (
<div className="homepage">
.......
</div>
);
};
export default Hompage;
样式文件：
.homepage {
display: flex;
flex-direction: column;
align
浏览 2提问于2020-01-30得票数 0
回答已采纳
2回答
我正在开发和应用程序与phonegap。我想使用flexbox在我的主应用程序区域中布局一些按钮。
有人能解释一下为什么这个没有用最新的chrome来包装元素吗？
HTML：
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
浏览 0提问于2013-05-27得票数 2
回答已采纳
1回答
Flex wrap在IE11的表格tbody中不起作用。我尝试了其他堆栈溢出帖子中的不同建议，但没有一个有用。
如果您在chrome/firefox/edge中打开这个URL，您可以看到flex wrap工作正常，但在IE11或更高版本中它不能
我也尝试使用作为参考，但用处不大。
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
border: 1px solid black;
}
tr {
border: 1px solid blue;
display: flex;
浏览 0提问于2019-02-22得票数 2
我目前正在做一个项目，我一直在使用flex
一切看起来都很好，但当您将视口缩小(大约1400px)时，您会看到列布局折叠。我怎样才能防止它们倒塌。我的css中没有媒体查询，所以不是因为媒体查询。
所有框的占位符：
#overview {
-webkit-box-flex: 4;
-moz-box-flex: 4;
-webkit-flex: 4;
-ms-flex: 4;
flex: 4;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
浏览 2提问于2014-11-28得票数 0
我正在寻找一个解决方案，如何使Flex属性在所有三种浏览器(IE、Firefox和Chrome)的table组件上工作。
以下代码仅适用于Chrome (即使添加了-ms-和-webkit-前缀)：
table {
background-color: white;
}
.child {
padding: 5px;
margin: 5px;
background-color: #eee;
border: 3px solid;
}
.container {
padding: 2px;
background-color: yellow;
display: -ms-
浏览 1提问于2016-02-17得票数 5
回答已采纳
1回答
我使用Compass 1.0，当我执行@include display-flex;或任何其他与flex相关的属性时，我只得到
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
等等，没有-moz或-o前缀。知道为什么吗？
浏览 6提问于2014-07-02得票数 0
回答已采纳
1回答
我正在创建的布局在Safari中不起作用，尽管它在Chrome中工作得很好。我有一种感觉，它与.wrapper或.frame有关，但我尝试将Flex收缩值设置为0，但没有效果。
.frame {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100vh;
position: relative;
overflow: hidden;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1
浏览 5提问于2015-03-11得票数 11
回答已采纳
1回答
角CLI移除前缀CSS
、、、、
我在用@angular/cli@1.4.3。
在构建之前，我使用gulp自动修复我的CSS。这是个不错的选择。下面是它创建的CSS示例(不因可读性而缩小)：
form.registration-form {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
al
浏览 1提问于2017-10-06得票数 2
回答已采纳
我在一个容器中显示多个DIV，我希望它们在右侧没有更多空间时进行包装。它在IOS上工作得很好，但我不能让它在Android上工作。
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
这是一个jsfiddle：
感谢您的帮助！巴斯提安
浏览 2提问于2014-06-03得票数 0
1回答
如何防止flexbox元素换行？这有可能吗？
我正在尝试用flexbox创建一个两列网格，带有以下标记：
<div class="flex-container">
<div class="no-wrap">this should not wrap</div>
<div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt
浏览 0提问于2013-08-21得票数 48
回答已采纳
2回答
我刚开始玩柔韧盒。我想创建一个这样的结构
我试图创建这个，但是最后一个<div> d总是出现在不同的行中。
body {
margin: 0;
}
.foo {
display: flex;
flex-wrap: wrap;
flex-direction: row;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: row;
height: 400px;
}
.a, .d {
flex: 0 0 50%;
backgrou
浏览 3提问于2016-10-07得票数 1
回答已采纳
我有一个输入元素，我想使用flex收缩来增长和缩小，但是它的flex基大小没有被应用。
这是我的html：
<div class="flex-container">
<div class="flex-row">
<input type="text" name="query" class="searchbar" />
</div>
<div>
我的css：
.flex-container{
display: flex;
浏览 0提问于2016-11-07得票数 1
回答已采纳
我正在尝试让page-break-inside: avoid在一个使用多行flexbox布局(使用flex-wrap: wrap)的表单中工作。这样做的目的很简单，就是避免在打印时中断表单问题。
这对于单行的flexbox或者没有flexbox都能很好地工作。请参阅的打印预览(注意，未应用flexbox类)
但是，当使用多行弹性框时，它似乎忽略了page-break-inside: avoid css规则。请参阅的打印预览(注意，我将flexbox类添加到了部分元素)
<form>
<section class="flexbox">
浏览 3提问于2013-12-06得票数 20
2回答
每当我尝试以这种方式设置flex项时，不是每行获得2条，而是获得4条。但是使用第二种解决方案，它似乎工作正常。为什么它不能像在第一个css代码中那样工作呢？
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4<
浏览 5提问于2022-05-17得票数 -1
4回答
如果使用IE11，似乎flex-wrap: wrap无法正确计算flex项的宽度。
请参阅
这四个盒子有弹性的基础: 50%，所以我们应该得到两行，每两个盒子，但在IE11，每个盒子得到一行。当将边框设置为0时，它正确工作。
知道这是否是一个bug，或者是否有办法使IE11行为(并且仍然使用边框)？
<section>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">
浏览 10提问于2014-02-21得票数 32
回答已采纳
2回答
我正在尝试学习flexbox，我真的很喜欢它。我正在尝试使用动态宽度的τοplay，当我使用divs时，它可以工作。如果我尝试用li来做这件事，它不能很好地工作。我的代码在上。
div.example
ul
li
| 1
li
| 2
li
| 3
li
| 4
li
| 5
li
| 6
div.container
div.col
| 1
div.col
| 2
div.col
| 3
div.col
| 4
div
浏览 0提问于2015-09-05得票数 37
回答已采纳
我有一个容器，它有一个display flex属性，并且我将flex-wrap设置为wrap。 我遇到的问题是，项目之间的空间太大了。 我的代码： #container {
display: flex;
flex-wrap: wrap;
width: 250px
}
.child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto
} <div id="container">
<div class="child">Ss</div>
<d
浏览 51提问于2021-05-10得票数 0
回答已采纳
1回答
我有使用flex的div容器。我的弹性儿童容器里有一个大胆的衰老。
示例
Lorem ipsum dolor与之同坐，是一种非常重要的植物。在卵黄中有一种新的特征。诺兰的前庭奥西。
然而，当我创建我的flex容器时，它并没有将粗体文本内联。它在普通文本和粗体文本之间创建一个块。
示例
Lorem ipsum dolor
同坐，圣洁的精灵。在卵黄中有一种新的特征。诺兰的前庭奥西。
我已经将我的flex容器设置如下：
.flexparent { display: flex; flex-direction: row; justifty-content: center; flex-wr
浏览 4提问于2016-09-01得票数 9
回答已采纳
我正在尝试整理我的flexbox布局，以便它与最新版本的IE/Firefox/Safari兼容，但我对Firefox/Safari有问题。
建议的布局：
-----------------
header
-----------------
|
|
|
nav | section
|
|
|
|
在火狐和Safari中，<section>位于nav之下
CSS：
body {
width:50%;
height:100%;
display: -ms-flexbox;
-ms-box-orient: h
浏览 0提问于2013-07-04得票数 6
回答已采纳
我一直在尝试使用"display: flex“，它适用于较新版本的浏览器，但无法使其在旧版本上工作。我试图使用“Display: box”属性作为后盾，但即使它似乎也不起作用。
#flexSampleDiv{
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-st
浏览 3提问于2015-04-07得票数 1
1回答
嘿，我现在正在摇摆一个灵活的盒子布局。
我在chrome中有一个问题，在标签div中的一个空格似乎无缘无故地在行的底部创建了一些额外的空间，而在internet explorer中，它是罚款的，而在没有空格的铬中，它是罚款的。
<!DOCTYPE html>
<html>
<head>
<style>
div.popup-body{
width:500px;
margin:0 auto;
}
div.popup-form-container{
display:flex;
flex:1;
flex-dire
浏览 1提问于2015-06-30得票数 1
回答已采纳
我有一个问题，柔韧性盒正确地显示在包装。
在下面的代码中，您将看到中间的.wrap容器并不平均分配空间，因此各个flex子容器的大小是相等的。
我知道我一定做错了什么。我希望你能给我一些指导。
这个问题可以在这个页面上找到：
.wrap {
width: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-we
浏览 3提问于2016-10-11得票数 2
我的目标是使用flexbox拥有三个响应性的列。目前，调整大小时，列可以从左到右或从上到下。我正在尝试将三列布局变成两列布局，其中第三列在前两列下方居中。但是，第一列和第二列并不相邻。 我在谷歌上搜索并查看了其他示例，并尝试实现它们，但我不确定为什么它仍然不起作用。 我该如何解决这个问题呢？提前谢谢。 链接到我的codepen：https://codepen.io/sbarclay7/pen/ZEQZvaj html {
height: 100%;
}
body {
color: #FFFFFF;
text-align: center;
}
* {
浏览 28提问于2020-07-27得票数 0
回答已采纳
1回答
我不认为flex-shrink和flex-wrap:wrap;在一起是有意义的，但我想知道我是不是错过了什么。
.container{
background: #DDD;
width: 300px;
height: 100px;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap
}
.tags{
background: orange;
box-sizing: border-box;
flex: 1 3 200px;
}
.redes{
background:
浏览 3提问于2016-04-26得票数 12
回答已采纳
具有列表标签的网格列，我需要以正确的顺序显示每3列，自动宽度为每个额外的HTML列表元素启用。
这是我的例子：
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
浏览 3提问于2016-02-02得票数 82
回答已采纳
我正在尝试让行中的最后一个div在它被换行到下一行之前在它自己内部换行。
<div class="flexcontainer">
<div class="col1">this is text</div>
<div class="col2">this is text</div>
<div class="col3">
<div class="contents m1">
浏览 0提问于2020-09-14得票数 0
2回答
所以我已经简单的研究过了。我在div中添加了一个img，并将img的宽度设置为100%，这应该会对高度产生影响。我不明白这是怎么回事。我只需要我的图像留在他们的适当的纵横比在下面的flexbox。
.container {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
height: 100vh;
width: 80%;
/*padding-top: 2%;
padding-bottom: 18%;
浏览 0提问于2016-10-17得票数 0
我在一个网站上使用flexbox，它在Safari、iPad 3和Safari上崩溃了。
其设计和代码类似于此代码。
display: flex;
flex-wrap: wrap;
这是在出现问题的设备上的外观：
有什么建议可以解决这个问题吗？
浏览 0提问于2015-11-03得票数 16
1回答
我有我隐藏和使用的输入:在内容之前，用一个图像替换它。当我们点击输入时，图像将变成更暗的图像(我这样做是因为我不确定是否可以在png图像上添加不透明度)。
它可以工作，但是，图像似乎不能在点击之间顺利加载。它有奇怪的闪光或过渡不平滑，在我检查输入后，白色闪光消失了。有没有办法解决这个问题或者绕过它？
label{
font-size: 18px;
color: #bfd5e9;
display: flex;
align-items: center;
justify-content: center;
}
.block-main-wrap{
d
浏览 6提问于2021-02-18得票数 0
3回答
如何将黄色背景的div伸展到完全高度？它应该遮住果岭，但它不起作用。我试着在上面添加height: 100%，但是它会把搜索栏的高度加起来吗？
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width:
浏览 2提问于2018-01-30得票数 0
回答已采纳
2回答
我试图找出我做错了什么，因为它似乎不想工作。我所要做的就是让页脚框排成一行(当在桌面上时)，然后移动，让它们与display flex css标签堆叠在一起，但我已经尝试了所有的方法，似乎不想工作。如果我放入column，那么它会同时放在两个上面。
网站可在shop.bridgetsarah.co.uk上显示。
<div class="footer">
<div class="widget1">
<?php dynamic_sidebar( 'ft1' ); ?>
浏览 1提问于2020-03-18得票数 0
1回答
我想作出以下计划所解释的行为：
每当一个元素在屏幕外时，我都希望它放在右边的一个新列中。
目前，所有元素都在同一列中。
以下是当前显示我的元素的方式：
<style is="custom-style" include="iron-flex">
.flex-wrap {
@apply(--layout-wrap);
@apply(--layout-vertical);
}
</style>
<template>
<div class="conta
浏览 6提问于2016-04-24得票数 0
回答已采纳
如果我将#main.overflow设置为none，我就会得到我想要的东西。
如果我将#main.overflow设置为scroll，这不是我想要的，最后一个元素会因为错误而中断。
为什么滚动条会导致Flex布局错误？
正确的结果
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#main {
overflow: none;
width: 200px;
background-color: #321;
display: flex;
flex-direction
浏览 0提问于2020-09-20得票数 0
有一个弯曲方向的挠曲容器:行。每一列都是具有弯曲方向的挠性容器:列。
在flex行中有一些表单输入，但是当我尝试给出位置时，选择一个初始的flex: 250px，它不工作，它垂直地应用它。
但是，我找不到办法让它水平地应用。
<div class="row">
<div class="column input-container location">
<label for="location">Location</label>
浏览 0提问于2018-10-07得票数 0
回答已采纳
3回答
所以我有这样的代码，我会把12个盒子放在一个div里面，但是有一个盒子放不下。 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flex Function Example</title>
<style>
div {
display: flex;
浏览 34提问于2021-04-17得票数 0
回答已采纳
我正在尝试创建嵌入在具有一定宽度和高度的div中的“购物项目”。我知道你可以做display: inline !important;来保持div在同一条线上。
然而，当窗口变小时，最好是当外部div较小时，如何才能使其断裂呢？
下面是一个例子：
以下是我尝试过的：
<div class="row">
<div class="col-sm-12">
<div class="items">
<div clas
浏览 2提问于2016-11-16得票数 1
回答已采纳
4回答
我从一个无序的列表中构建了一个菜单。当您选择一个项时，它会将类交换为active。我想做的是在用户选择了一个项目之后，从这个无序列表中获取HTML或数据目标的值。在下面的示例中，我希望检索外部或外部，并将其存储在选择结束后可以传递给ajax/php的变量中。
.options {
list-style: none;
padding: 0;
margin: 0 -4px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wr
浏览 0提问于2018-07-18得票数 1
回答已采纳
我在我的项目中使用css flex，但它在项的末尾添加了一个空框。如何删除它？ 我的代码 Name
Email CSS .form-horizontal{
display: flex;
width: 100%;
white-space: pre-wrap;
flex-wrap: wrap;
} ?
浏览 52提问于2021-02-25得票数 0
回答已采纳
我希望用户点击一个按钮来显示隐藏的柔性盒菜单。所以我当然知道如何处理正常的事情：
nav#test {
display: none;
flex-flow: column nowrap;
}
document.querySelector('#test').style.display = 'flex';
但是那些愚蠢的供应商前缀替代规则呢？我以前从来没有想到过，我不知道该如何处理。
编辑:为什么不自动修复？
一句话：wrap。在上面的例子中，我使用了flex-flow: column nowrap;。但假设这个规则是flex-flow: row wr
浏览 0提问于2016-01-14得票数 2
回答已采纳
我有以下代码，文本没有被包装。即“行动计划完成”是长文本，我想把它换成类似于“行动计划”。
Complete‘。
<td>
<span class="column-data wrap-text">{{ value }}</span>
</td>
Css：
.column-data
{
display: flex;
justify-content: center;
align-content: center;
flex-direction: c
浏览 2提问于2021-07-29得票数 0
1回答
这是HTML
<div class="container">
<h2 class="makeup text-center">Galeria</h2>
<div class="heading-underline"></div>
<ul class="wrap">
<a href="img/galeria/1.JPG" data-lightbox="clients" da
浏览 14提问于2018-11-27得票数 0
我不能让东西左右对齐的卡片标题通过CSS。在我的卡片标题中，我想把md-icon delete_forever放在右边。我尝试了flex，但不起作用。
<div class="flex-container">
<div *ngFor="let item of items | async" class="flex-items-default">
<md-card (click)="test()" style="width:300px;height:250px"
浏览 2提问于2017-01-08得票数 1
在CSS flexbox中，有没有办法在一个项目(我的产品grid=brown)完成后，将另一个项目(我的sidebar=grey)展开为全宽？在图片的左边是我实现flex wrap之前的样子，中间是我现在使用wrap得到的，右边是我想要的。有时我的侧边栏很高，这取决于可以设置的过滤器的数量。这将是很好的已经看到产品旁边的侧栏，但与完整的宽度后，侧栏完成。到目前为止我的CSS代码：
.flex-layout {
display: flex;
min-height: calc(100vh - 60px);
flex-wrap: wrap;
}
.flex-col1 {
浏览 0提问于2020-06-16得票数 0
1回答
一个HTML主体，放入3列，具有比父元素更长的文本节点的列表项。
HTML如下所示：
<div class='wrap'>
<div class='column'>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
[...]
<ul>
<li>I'm a horribly
浏览 0提问于2018-08-20得票数 1
align-self
在下面的代码中，align-self使用flex-wrap: nowrap。
flex-container {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
width: 250px;
height: 250px;
background-color: silver;
}
flex-item {
flex: 0 0 50px;
height: 50px;
margin: 5px;
background-color: lightgreen;
}
f
浏览 4提问于2017-03-05得票数 93
回答已采纳
2回答
我正在学习柔性盒，我想做一个如下所示的布局：
因此，我编写了以下代码：
.container {
display: flex;
gap: 26px;
}
.flex50 {
flex: 50%;
flex-wrap: wrap;
min-width: calc(50% - 13px);
background-color: #000000;
margin-bottom: 26px;
}
.flex33 {
flex: 33.33333%;
flex-wrap: wrap;
min-width: 33.33333%;
backgroun
浏览 5提问于2022-01-21得票数 -1
回答已采纳
1回答
更改不同浏览器的CSS
、、、、
我只是想知道，如果在不同的浏览器中查看CSS，是否可以更改它。
例如，我将这个特定的CSS用于flexbox：
.wdFlex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-
浏览 2提问于2013-09-13得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
