相关疑难解决方法(0)
css flex 正在改变图像大小
我正在使用 css flex 来布局一系列 3 行徽标。除了最后一行中的两个更深之外，它们的大小都相同。
最后一行中的所有徽标都被拉伸到相同的深度，即更深的一对。
图像显示徽标 1,3 和 5 已垂直拉伸
请问我该如何停止。
.brandLogos div{
display:flex;
display:-webkit-flex;
flex-flow: wrap;
-webkit-flex-flow: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.brandLogos img {
border:1px solid green;
margin-right:10px;
margin-bottom:30px;
}
<div class="brandLogos">
<div>
.. 10 previous images
<img src="/uploads/2017/03/santander.jpg" alt="santander logo" width="134" height="70" />
<img src="/uploads/2017/03/Sony.jpg" alt="" width="134" height="119" />
<img src="/uploads/2017/03/talktalk.jpg" alt="talktalk logo" width="134" height="70" />
<img src="/uploads/2017/03/unilever.jpg" alt="unilever logo" width="134" height="119" />
<img src="/uploads/2017/03/Warburtonslogo.jpg" alt="warburtons logo" width="134" height="70" />
</div>
</div>4
推荐指数
推荐指数
1
解决办法
解决办法
5867
查看次数
查看次数
对齐容器内的三个元素（左/中/右）
我正在尝试创建一个带有三个内部内联元素的全角横幅。反向链接、徽标和正向链接。
我还想使用相同的代码创建一个带有两个内部内联元素的全角横幅。左后链接和中央徽标。
到目前为止我所拥有的是：
超文本标记语言
<section id="header-blue">
<div id="header-wrap">
<div class="header-left"><p>1</p></div>
<div class="header-center"><p>2</p><p>2</p><p>2</p><p>2</p></div>
<div class="header-right"><p>3</p><p>3</p></div>
<div class="clearfix"></div>
</div>
</section>
社会保障体系：
#header-blue {
width: 100%;
margin-bottom: 50px;
height: auto;
background-color: $primary-blue;
color: #fff;
#header-wrap {
text-align: center;
border: 1px solid green;
margin: 0 auto;
padding: 1rem 2.5rem;
div {
display: inline-block;
vertical-align: middle;
}
}
.header-left {
float: left;
border: 1px solid red;
width: 100px;
}
.header-right {
float: right;
border: 1px solid red;
width: 100px;
}
.header-center {
border: 1px solid …3
推荐指数
推荐指数
1
解决办法
解决办法
4243
查看次数
查看次数
如何删除继承父高度的弹性项目
我有以下布局：
.content-container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.view-content {
width: 100%;
display: flex;
justify-content: space-around;
}
.zavod,
.ekipa {
width: 100%;
max-width: 300px;
background-color: red;
}<div class="content-container">
<div class="view-content">
<section class="zavod">
<p>Some text</p>
</section>
<section class="ekipa">
<p>Some more text</p>
<p>Even more text</p>
<p>Even more text</p>
</section>
</div>
</div>我想完成的是为了.zavod和.ekipa拥有不同的高度。现在这在单个 flex 容器中有效，但是当我嵌套多个时它不起作用。
我究竟做错了什么？
3
推荐指数
推荐指数
1
解决办法
解决办法
6374
查看次数
查看次数
如何防止 Flexbox 项目填充父项
我有一个简单的 DOM 结构：
<body>
<main>
<div class='card'>
<h1>HEADER<h1>
<div>
Some dynamic content
</div>
</div>
</main>
</body
样式使得主标签占用窗口的高度，设置为显示为 flex，并将卡片元素居中。但是，该卡似乎想要占据其父级（主要）的高度，即使我期望（和想要）的是卡调整其内容的大小。我不想在卡上设置明确的高度。
这是一个演示问题的 JSfiddle：https ://jsfiddle.net/hjeq78c4/2/
如何防止此卡片项目一直延伸到底部，并且仅对其内容进行大小调整
2
推荐指数
推荐指数
1
解决办法
解决办法
2978
查看次数
查看次数
CSS FlexBox - 具有不同高度的子元素？
我正在尝试使用FlexBox设计子菜单.
FlexBox的默认行为是为所有子元素提供相同的大小.
这会在显示子菜单时导致所有项目展开.
使用Flexbox时有什么可以避免的吗？
Codepen:https://codepen.io/dsomekh/pen/oeogGq
<style>
.single_tag{
display:flex;
flex-direction:column;
margin-right:6px;
background-color:#ADD8E6;
margin-bottom:6px;
padding:2px;
border-radius: 5px;
border:2px solid red;
}
.container{
display:flex;
justify-content:center;
}
.dropdown-content {
display: none;
flex-direction:column;
}
.dropdown-content_second {
display: none;
flex-direction:column;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.single_tag:hover .dropdown-content {
display: flex;
}
</style>
<html>
<div class="container">
<div class="single_tag">First div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="single_tag">Second div
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link …2
推荐指数
推荐指数
1
解决办法
解决办法
5824
查看次数
查看次数
Flexbox 2 divs 不同的高度
我如何让这个工作flexbox：
当 的red box内容比green box（参见我的示例）
green box多时，不应获得与 相同的高度，red box而只是需要的高度。
.flex {
display: flex;
}
.border {
border: 2px solid black;
}
.bg-red {
background: red;
}
.bg-green {
background: green;
}
.p-2 {
padding: 8px;
}<div class="flex">
<div class="bg-red border p-2">
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
<p>content-red</p>
</div>
<div class="bg-green border p-2">
<p>content-green</p>
</div>
</div>我如何让它与 flexbox 一起工作？
2
推荐指数
推荐指数
1
解决办法
解决办法
1899
查看次数
查看次数
如何使用flex创建两个高度不相等的并排列？
正如您在此编码器https://codepen.io/anon/pen/yELMrv中看到的那样,红色列的高度与蓝色列的高度相同,即使内容较少.我希望我的红色列的高度由其内部的内容决定.
.column-layout{
display: flex;
}
.one{
background-color: blue;
flex: 3;
}
.two{
background-color: red;
flex: 1;
}<div class='column-layout'>
<div class='one'>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class='two'>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
</div>1
推荐指数
推荐指数
1
解决办法
解决办法
95
查看次数
查看次数