Flex: 1不垂直填充角度布局Div
是一种CSS布局技术，用于实现灵活的盒子模型布局。它是CSS3中引入的Flexbox布局模型的一部分。
Flexbox布局模型是一种用于在容器中进行灵活的、自适应的元素布局的方法。它通过将容器分为主轴和交叉轴来控制元素的排列方式。Flex: 1是Flexbox布局中的一个属性，表示元素在主轴上的占比，这里的1表示占据剩余空间的比例为1。
不垂直填充角度布局Div是指在Flexbox布局中，元素的高度不会自动填充容器的高度，而是根据内容的高度来决定。这意味着元素的高度会根据内容的多少而自动调整，不会撑满整个容器的高度。
应用场景：
- 在响应式设计中，可以使用Flex: 1不垂直填充角度布局Div来实现自适应的页面布局，使页面在不同设备上都能良好地显示。
- 在列表或网格布局中，可以使用Flex: 1不垂直填充角度布局Div来实现等高的卡片或网格项，使它们在同一行或同一列中对齐。
推荐的腾讯云相关产品：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行应用程序。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，用于存储和管理大量的非结构化数据。
- 腾讯云容器服务（TKE）：提供高度可扩展的容器化应用程序管理平台，用于部署、运行和管理容器化应用程序。
更多关于腾讯云产品的信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
我在一个角度应用程序上工作，作为它的一部分，我试图创建一个页面，卡片是垂直填充的，而不是水平填充的。一旦在第一列中填充了5-6张卡片，我们就开始填充第二列。我的代码： presentations = [1,2,3,4,5,6,7,8]
<div class="row card-data">
<div class="col-4" *ngFor="let presentation of presentations">
<mat-card>
card 1
浏览 18提问于2021-05-11得票数 0
回答已采纳
我正在尝试创建一个不使用媒体查询的响应式视图。我的视图布局有一个内容div和一个脚注div。页脚div应该始终固定在视图的底部，内容div应该垂直扩展以填充剩余空间。 在内容div中有一个左div和一个右div。当视图的宽度较小时，左边的div应该堆叠在右边的div之上，以形成单列布局。Here's a screenshot of the single column layout。在一些定义的宽度之后，右边的div应该移动到左边的div旁边，以形成一个两列的布局。Here's a screenshot of the two column layout。 我遇到的问题是当我们在
浏览 28提问于2020-11-05得票数 2
1回答
我有一个装有儿童物品的容器：
<div id="container">
<div className="item">1</div>
<div className="item">2</div>
<div className="item">3</div>
<div className="item">4</div>
</div>
CSS
#container {
浏览 3提问于2021-02-10得票数 0
回答已采纳
我有一个container，它适合整个视口与nav，main和footer节点。main节点需要填充页面的所有可用空间，因此它的高度是动态的。在main节点内部，我有一个很短的节点层次结构，其中cats节点可能不适合父节点。
<div class="container">
<nav>
<input />
</nav>
<main>
<div class="scrollable">
<div class="cats">
浏览 10提问于2018-12-14得票数 0
回答已采纳
3回答
我的问题很简单。是否可以在flex项目上显示:表？
当我在一个项目上设置它时，布局不像预期的那样工作--第二个flex项不会占用可用的垂直/水平空间。
.parent {
min-height: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: gray;
}
.content {
flex: 1;
display: table;
background-colo
浏览 4提问于2016-03-11得票数 2
回答已采纳
6回答
带角材料的Pinterest布局
、、、、
我需要的下列布局，如果卡是从左到右插入，包装在可用宽度的末尾，并填写之间的任何垂直空间卡。所有卡片都有相同的宽度，但高度不同：
这是可能的平原角和CSS？怎么做？
我试着用display:flex实现这一点，但是我无法摆脱垂直空间：
.cards {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
我还找到了一个纯CSS解决方案，它解决了空间问题，但是有不同的顺序，并且需要一个固定的高度：。
更新
附加要求：
响应布局:根据有窗口
浏览 12提问于2016-11-22得票数 12
回答已采纳
我希望用Tailwind + CSS创建一个基本布局，具有固定高度的页眉、固定高度的页脚、固定宽度的导航条和内容填充其余部分，其中整个包含区域扩展以填充可用空间，如下所示：
我已经和混得这么远了
<div class="flex min-h-full w-full flex-col bg-slate-400 grow">
<div class="flex h-32 w-screen bg-red-400">Title</div>
<div class="flex h-auto w-screen
浏览 6提问于2022-08-31得票数 1
回答已采纳
1回答
据我所知，我的aside元素和div.content应该占用div.container中可用空间的一半。此外，div.content中的网格应该占用所有可用的垂直空间。
问题是网格项无法获得任何高度(如果不是硬编码的话)。此外，网格所占用的所有垂直空间(因为grid-gap)都来自aside元素和div.content，这意味着div.content窃取了aside的垂直空间，这两个元素不再是相同的高度。
aside的高度等于div.content的高度减去网格的高度。
总之，禁止使用柔性箱为div.content设定高度。添加到div.content中的子元素的行为更像它的兄弟类。
*
浏览 0提问于2019-05-11得票数 1
回答已采纳
我一直在尝试学习一些关于CSS柔性盒的知识，特别是为了让一个粘性的页脚工作，基于。
布局是3个基本的div:一个页眉，主要内容和页脚。主内容div应该垂直展开，这样页脚总是在页面底部。在Safari中，页面按预期加载，但垂直调整窗口的大小()不会调整布局的高度(即没有移动)--如果我使窗口更高，主内容div中的额外空间也不会改变，使页脚保持在底部。调整窗口的大小(水平)确实会正确地重新流页。在Chrome中，一切都像预期的那样工作。
如我所期望的那样工作，并且我已经仔细地遵循了这个例子(使用 )。比较web检查器中的页面，flexbox似乎是一致的，唯一(似乎)相关的区别是示例中的活代码使用m
浏览 4提问于2014-05-13得票数 3
回答已采纳
1回答
我有一些类似的html：
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
background-color: aqua;
}
.box {
width: 100%;
height: 100%;
flex-grow: 1;
background-color: cadetblue;
display: flex;
flex-direction: column;
}
.fill {
flex-grow:
浏览 3提问于2022-09-22得票数 0
回答已采纳
在下面的标记中，当page div没有足够的垂直空间且垂直滚动条已经就位时，app-sidebar div不会被拉伸以填充垂直空间，并且受视口高度的限制。
html, body {
height: 100%;
margin: 0;
}
.viewport {
height: 100%;
width: 100%;
display: flex;
}
.app {
flex: 1;
display: flex;
flex-direction: column;
}
.app-header {
height: 48px;
background: #AAA
浏览 4提问于2017-10-31得票数 0
回答已采纳
1回答
我目前正在做一个简单的CSS布局，包括两个并排的窗格和一个页脚。我有以下限制：
左边的窗格宽度是固定的.
页脚是固定的高度，不能落在包含的div底部。
其余维度展开，以填补可用空间。
右边的窗格包含了很多内容.它应该是水平卷绕和垂直滚动。
我试着生产一些适合使用柔性盒的产品。
HTML：
<div class="container">
<div class="top">
<div class="left">
Top-left content
</d
浏览 11提问于2017-10-03得票数 0
3回答
我正在构建一个使用CSS flex的侧边栏，我需要它垂直增长来填充整个屏幕的垂直高度。这是我正在做的事情的骨架。
.app {
display: flex;
flex-direction: row;
. align-items: flex-start;
height: 100%;
width: 100%;
}
.sidebar {
background-color: red;
height: 100%;
}
.content {
width: 100%;
display: flex;
flex-direction: column;
}
.cont
浏览 9提问于2017-11-07得票数 1
回答已采纳
目前，我的"flex“项目看起来如下(垂直对齐:顶部).
_____________________________________
1
_____________________________________
2
_____________________________________
3
_____________________________________
4
_____________________________________
我的目标是让它们看起来像这样(垂直排列:中间).
______________________
浏览 2提问于2014-05-03得票数 12
回答已采纳
2回答
下面是我的代码，在代码中，我试图向唯一的父div添加填充，但是layout-padding也被应用到内部div <div layout="column" flex>中，使div稍微向下移动。请检查附呈的截图-
我的密码-
<div layout="row" style="height: 100%;" layout-padding>
<div id="r2" flex="20">This is content one</div>
浏览 2提问于2016-04-20得票数 1
回答已采纳
3回答
我有一个“英雄形象”填充的高度和宽度的视口。在这个div中有一个标题。我希望标题是垂直对齐，以便任何可用的空间是三分之一以上和三分之二以下。
例如:英雄图像=1000 For高。H1 = 400 px高。所以上面的空间=200 So下面的空间=400 So
这是一个响应的布局，所以我不知道的高度英雄形象或标题。
垂直中心化使用Flexbox是容易的，但我需要更多的空间下面。有人能告诉我正确的方向吗？
到目前为止，这是我的密码。请注意，我以前没有使用过Flex，所以我不知道自己在做什么。
.hero_image {
min-height:100vh;
background-col
浏览 0提问于2019-02-01得票数 2
回答已采纳
2回答
在我的项目中安装了材料flex布局，但是我无法在@node_modules中看到该文件，并且它没有为flex布局css正确地呈现。
下面的代码我遵循，请建议任何东西在这里遗漏。
安装
npm install @angular/flex-layout@latest --save
进口 app.components.ts
import { ObservableMedia } from '@angular/flex-layout';
进口 app.moduel.ts
import { FlexLayoutModule } from '@angular/flex-layout&
浏览 5提问于2017-10-15得票数 1
1回答
我希望第一列(黄色表格单元格)跟随其内容的宽度--这是一个图像，第二列(石灰绿表格单元格)填充表的其余部分。这一点很重要，因为当您垂直调整窗口大小时，图像也会被调整大小，石灰绿单元格中的文本将得到一个垂直滚动条。
我找到了解决方案，其中第一列获得了保存其内容所需的最小文本量(white-space: nowrap技巧)，但它不能处理图像。
如果这里的桌子布局不合适，我愿意接受其他建议，也许是柔性盒？
<html>
<head>
<style>
.panel {
display: flex;
flex-direction: column;
浏览 10提问于2021-12-16得票数 0
回答已采纳
1回答
我有4个div，我正在使用柔性盒对齐。在桌面大小时，有3个等宽列，第一个和最后一个div占据容器的整个高度。第二和第三div垂直叠加在中间，各占50%的高度。效果很好。
在移动大小时，我希望最后一个div位于顶部，并扩展整个容器的宽度。然后，我希望第一个div在顶部div下方左对齐，占容器宽度和剩余高度的50%。
我遇到的问题是，我希望第二和第三div在顶部div下对齐，并占据剩下的50%的宽度，但是垂直叠加，所以每一个都占剩余高度的50%。
我尝试过在媒体查询中更改flex-direction和其他我能想到的东西，但是它不起作用。
* {
margin: 0;
padding:
浏览 0提问于2019-02-07得票数 1
回答已采纳
1回答
我正在测试新的引导带4-字母5，现在我使用的是柔性盒。
我想垂直对齐行中的所有列，但它只对第二列起作用--为什么？
我试过中间的每一列和每一列。
<div class="login-page">
<div id="login-container">
<div class="container-fluid">
<div class="row flex-items-md-middle">
<div class="col-md-8 login-con
浏览 0提问于2016-11-30得票数 1
回答已采纳
1回答
大家好，我有这样的布局：
这就是我尝试过的：
在<a href>和<img src...>中重置填充和页边距
HTML容器
<div>
<div className="percentage">
{percentage}%
<div className="buttonContainer">
<HandlePercentageButton add onClick={() => this.handlePercentage(&
浏览 1提问于2019-05-29得票数 0
回答已采纳
我试着在Flexbox中填充一个挠性物品的垂直空间。
.container {
height: 200px;
width: 500px;
display: flex;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background
浏览 10提问于2013-03-13得票数 784
回答已采纳
我正在尝试使用具有不同指定高度的div的flex-direction: column来创建布局。如果您为共享相同flexbox父元素的div指定不同的高度，我发现垂直对齐方式消失了。
我尝试了使用align-items，align-content，justify-content的各种组合，但都没有效果。我用flex-grow代替了高度规则，它也没有效果。我可以让内容垂直居中的唯一方法是使所有项目的相对高度相同。
header {
display: flex;
flex-direction: column;
justify-content: space-around;
al
浏览 25提问于2017-03-13得票数 3
回答已采纳
2回答
我正在尝试扩展iframe的大小，以填充我的web应用程序中的剩余空间。我知道已经为div分配了最大空间(通过添加边框)，但是iframe高度本身并没有扩展到填充整个垂直高度。
问题是，row content iframe没有填满整个垂直空间，即使flexbox适当地分配了该空间。
有什么想法吗？
.box {
display: flex;
flex-flow: column;
height: 100vh;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
flex: 1 1 auto;
}
.box
浏览 0提问于2015-10-22得票数 17
1回答
我的处境：
我建议从结果窗口弹出。
我有一个垂直的flex容器，它包含两个项目。第二个项目也是一个垂直的挠性容器。它包含几个项目，它们是水平的灵活容器。这些水平容器包含两个项目。其中一个项目包含一个图像，设置为高度:100%。另一项设置为填充剩余空间。
视觉表征
灰色=顶层垂直挠性集装箱
绿松石=固定项目
绿色=第二个垂直柔性集装箱
黄色=水平挠曲容器
red =包含图像的flex项
暗紫色=图像
洋红=指定用来填补空空间的挠性物品
期望:包含图像的项目缩小到包含高度:100%的图像，第二个图像扩展以填充空间。
实际结果:项目是图像的自然宽度，并且
浏览 1提问于2017-10-04得票数 0
我试着让一个柔性盒布局的子代填充它的父级。在任何其他上下文中，将宽度/高度设置为100%将导致div填充其父.我只想使用柔性盒作为我的顶层布局。
问题
#map-container div将不会填充#col1，即使它有100%的高度设置。
#controls div完全出现在#col1之外。我以前使用绝对布局，使盒子对角没有问题。在柔性箱里，祖父母似乎会引起问题。
我期待的是#map-container和#map填充#col1，#controls填充到#map的右下角。
.wrapper, html, body {
height:100%;
margin:0
浏览 3提问于2015-10-27得票数 2
回答已采纳
1回答
正如您在下面的片段中所看到的，foo-wrapper下的点并不遵循bar-wrapper下文本标签的垂直对齐方式。但根据:nth-child(i)规则，我期待着这一点。
如何使点，即不同容器的子容器的子容器(随后是水平挠曲箱( parent-wrapper)的子容器)，跟踪从另一个容器中的子容器的垂直排列？
我是否必须完全放弃柔性盒，使用类似于网格布局的东西？
<!DOCTYPE html>
<head>
<style>
.parent-wrapper {
align-items: stretch;
display:
浏览 0提问于2019-12-01得票数 0
回答已采纳
我想让背景颜色填充该区域，以便最长文本的高度始终相同，并使文本垂直居中，而不管它有多少行。如果可能的话，我不想在父对象上设置一个固定的高度，因为这可能会改变。
.flexbox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -8px;
margin-right: -8px;
}
.flexbox .sm-col-3 {
width: calc(1/3 * 100% - 16px);
}
.entry {
position: relative;
}
.entry-image
浏览 0提问于2020-02-21得票数 1
我想要一个具有特定高度的垂直菜单。
每个子代必须填写父级的高度，并具有中间对齐的文本。
孩子的数量是随机的，所以我必须使用动态值。
Div .container包含任意数量的子级(.item)，它们总是必须填充父级的高度。为了达到这个目的，我使用了柔性盒。
为了制作与中间对齐的文本链接，我使用了display: table-cell技术。但是使用表格显示需要使用100%的高度。
我的问题是.item-inner { height: 100% }没有在webkit (Chrome)上工作。
这个问题有解决办法吗？
还是有一种不同的技术使所有.item用垂直对中的文本填充父级的高度？
浏览 6提问于2015-11-10得票数 295
回答已采纳
2回答
我有一个可以包含任意数量的项目的柔性盒，并且我已经将它设置为一个特定的大小。
当我在里面有一堆物品时，这些物品会垂直地挤在一起，这是我想要的行为，但是如果只有几个，它们就会空间均匀地填充垂直空间。我怎么做才能让他们总是挤在一起？
.container {
height: 300px;
width: 500px;
display: flex;
flex-direction: row;
border: solid;
flex-wrap: wrap;
overflow-y: auto;
}
.flex-1 {
height: 100px;
width: 100
浏览 4提问于2022-05-11得票数 2
回答已采纳
3回答
角材料布局-分页填充页的其余部分
、、、、
我已经看过的例子了，但似乎还是找不出.有没有办法用div 填充页面的其余部分，使用角材料而不使用calc
通过使用“calc ()”来确定剩余的高度，我已经能够得到底部div来填充页面的其余部分，但是现在第一列的高度可能会发生变化(400 0px，200 0px，0 0px)，所以我需要找到一种不用使用calc的方法。
设置基本上是: navbar (固定高度)、第一列(高度随变化而变化)、第二列(应该填充页面的其余部分--尽管内容长度可能会更改，所以应该只在内容(不包括标题)上有滚动条，而不是整个div)。
HTML：
<div layout="column" la
浏览 3提问于2017-07-20得票数 0
回答已采纳
在柔性箱的情况下，为什么内嵌元件要填充顶部和底部？
这是我的代码
<div class="abc">
<a href="">hello</a>
</div>
css
.abc {
background-color:#eee;
/* display:flex; */
}
.abc a {
padding:10px 20px
}.abc {
background-color:#eee;
/* display:flex; */
}
.abc a {
padding:10px
浏览 2提问于2020-09-11得票数 0
根据CSS-tricks上的文档，使用justify-content: stretch，Flexbox子项目应该在其容器内伸展以填充可用的空间。我有一个flexbox容器，我将主轴设置为列方向，然后在这个容器中放置两个div flexbox项。我希望它们均匀地填充可用的垂直空间(所以我相信flex: 0 1 auto应该这样做)。
以下是JS小提琴：
body {
height: 100%
}
.container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: stre
浏览 1提问于2018-07-11得票数 0
2回答
我正在为一个应用构建一个报纸风格的布局。我的页面被分成8列，这些列应该先垂直填充，然后水平填充。
如果没有足够的内容填充页面，列仍然应该首先垂直填充，在页面右侧留出空白。目前，它们首先水平填充，在内容下方留出空白。
我尝试过CSS列，但它似乎总是填满页面的宽度，我看不到有什么方法可以改变这一点。
我也尝试过flex box，但flex包装不会像CSS列那样在div中断开/换行。
.flex-col {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 300px;
p {
wid
浏览 14提问于2018-01-06得票数 3
回答已采纳
2回答
我有一个网页，我想让其中一个页面在垂直和水平方向上居中，如下所示： <main>
<div>
This has to be centered both vertically and horizontally.
</div>
</main> 我不能改变main的显示，因为它被广泛用于所有的页面，并且使用flex打破了太多的东西。 我认为这应该可以工作，但它不是，因为div不会在高度上增长： main {
min-height: 1000px;
border: solid 1px red;
}
div {
displa
浏览 11提问于2021-02-04得票数 0
1回答
我试着使这个问题尽可能通用。本质上，我在另一个垂直的flex布局中有一个垂直(列) flex布局。在外部布局中，我希望主区域(在我的示例中是outer-main)填充剩余的垂直房地产。在内部布局中，我还希望主区域(inner-main)填充剩余的垂直房地产。
这在外部布局上正常工作，但在内部布局中，我只希望主区域(inner-main)是可滚动的，而不是整个布局。因此，inner-header应该始终是可见的，只有inner-main填充剩余的空间，并且可以滚动。
我如何调整我的CSS以实现这一点？
当在全屏中运行时，代码片段更容易看到。
.outer {
border: 1px so
浏览 0提问于2018-08-30得票数 0
回答已采纳
1回答
对于使用的应用程序，我需要一个3x3网格。它不需要响应，因为它应该总是显示在一个特定的屏幕设备上。目前，我的网格是这样的：
<div flex style="height: calc(100%/3);" horizontal layout flex>
<div flex style="height: 100%;">content</div>
<div flex style="height: 100%;">content</div>
<div flex style=
浏览 3提问于2014-11-04得票数 2
回答已采纳
我对两列布局(侧栏+主内容)有问题。目标是让这100%的垂直空间。
当前它填充到窗口，但如果内容位于需要滚动的窗口下面，则flex容器的高度仅与窗口一样大。
见 。注意边栏是如何填充右下角的窗口的，但是当您滚动它时，它不会展开以容纳窗口溢出。
HTML：
<div id="page_container">
<div id="page_sidebar"></div>
<div id="page_primary">
</div>
</div>
CSS：
h
浏览 7提问于2016-08-11得票数 1
回答已采纳
2回答
我在我的一个角html文件中有以下代码。我正试图在旋转木马中使用ng-重复使div元素相邻。
以下是我迄今为止所做的。
<div class="carousel-inner" role="listbox">
<div class="item active" layout="row">
<div class="message" flex=33
ng-repeat="message i
浏览 4提问于2016-12-16得票数 0
回答已采纳
2回答
我需要删除div的样式属性。
行85
::content > [condensed-title] {
pointer-events: none;
@apply(--layout-flex)*;
}
*(我不想把挠曲盒应用于我制作的高速头部组件中的缩略标题)
第133行
--layout-flex: {
-ms-flex: 1 1 0.000000001px;
-webkit-flex: 1;
flex: 1;
-webkit-flex-basis: 0.000000001px;
flex-basis: 0.0000
浏览 4提问于2017-03-30得票数 0
回答已采纳
3回答
我需要一个根据浏览器大小进行缩放的sidemenu。但我也需要一个页眉和页脚，也需要一个内容容器旁边的sidemenu。因此，假设sidemenu是宽度的1/4，内容容器是宽度的3/4，但是sidemenu和内容容器的高度始终是浏览器大小的100%或更多，这取决于内容容器和sidemenu中的内容。
我想这会很简单的，只要吃点东西就行了。为了更好。还有孩子身上的“挠曲: 1”。(还有一些代码，它在下面的小提琴链接中)
但是，只要我将sidemenu包装在一个新的div中，就可以使内容容器靠近sidemenu，而不是在下面。从挠曲箱垂直填充，失败。
所以，有没有人对如何解决这个问题有一些建议，
浏览 7提问于2017-08-31得票数 0
回答已采纳
6回答
如果这是我们的代码，它会在每一行中创建4个框，在它们之间具有相等的垂直空间，但是有两个问题我不知道如何解决：
最后一行中的框应调整到左边。
盒子之间应该有20 be的垂直空间。
我怎么才能用柔性盒做这件事？
.wrapper {
max-width: 80%;
margin: 20px auto 0;
display: flex;
flex-flow: wrap;
justify-content: space-between;
/* justify-content: flex-start; */
}
.box {
flex-basis: 23%
浏览 0提问于2019-04-09得票数 13
回答已采纳
我试图实现的布局如下所示，完全填充了浏览器的整个视图：
[----fixed height top "menu bar"----]
/-----\/----------------------------\
|fixed|| |
|width|| both ways stretchy content |
|side || |
|bar || |
\-----/\----------------------------
浏览 2提问于2015-10-25得票数 2
回答已采纳
2回答
在下面的代码中，我希望content部分填充到页脚位于屏幕底部的位置。
编辑:也许我应该对居中对齐更清楚一点。页眉和页脚需要垂直对齐，三个项目都需要从左边的竖线开始，如下所示：
我如何才能做到这一点？
html, body {
margin: 0;
padding: 0;
}
container{
display: flex;
flex-direction: column;
position: fixed;
top: 0;
width: 100%;
}
header {
height: 92px;
background-color: #
浏览 0提问于2018-05-04得票数 2
我有一个HTML和CSS文件，其中包含以下代码：
<div class="app">
<div class="header"></div>
<div class="main">
<div class="container_1">
<h1>Item</h1>
<h1>Item</h1>
<h1>Item</h1>
浏览 7提问于2022-05-26得票数 1
回答已采纳
2回答
我有一个包含以下样式的项目的容器：
.container-ok {
display: flex;
flex: 0 1 auto;
flex-direction: column;
align-items: flex-end;
}
.container-error {
display: flex;
flex: 0 1 auto;
flex-direction: column;
justify-content: flex-end;
}
.item {
width: 3rem;
border: 1px black so
浏览 0提问于2016-11-09得票数 0
我有一些需要注意的Flexbox标记。
除了最后一件事外，一切都在按计划进行。我在列布局中有一些div，其中两个是由内容或高度设置控制的，一个是不受控制的。最后一个不是高度控制的(中的颜色是黄色)，应该具有这样的高度，以便在其父div (绿色)中填充剩余的垂直空间。
即使当窗口按照这种响应性设计进行缩放时，黄色的div也应该始终填充到绿色父div的底部。
<div class="flexbox">
<div class="col">
<h3>RED</h3>
<p>Pellentes
浏览 4提问于2016-07-27得票数 7
回答已采纳
2回答
我想要使h2相对于它的父容器(圆角矩形)居中，但也希望图像(紫色正方形)垂直填充div，如下图所示。问题是图像的高度与h2块元素的框重叠。下面是我到目前为止使用flexbox的方法：
.topic-ex {
display: flex;
flex-direction: column;
}
.topic-ex h2 {
text-align: center;
}
.topic-ex-info {
display: flex;
}
<div class="topic-ex">
<h2>Text</h2>
&l
浏览 30提问于2019-08-05得票数 0
回答已采纳
2回答
MAJ :添加codepen：
我开始在一个非常具体的项目中使用flexbox。由于文档经常更换，因此我不会处理我的问题。
下面是我的html：
<div class="flexbox">
<div class="middle">Middle</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
和我的css (没有前缀的
浏览 3提问于2012-10-24得票数 1
我希望有两个JS图像组件并排和填充屏幕的宽度(当然有一点填充)，但有一个响应高度，以保持图像的尺寸。
这是我的代码：
<div className='flex flex-row p-4 border w-full justify-center'>
<div className='w-1/2 h-screen border relative'>
<Image src="{src}" layout='fill' />
浏览 1提问于2022-06-23得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
