相关疑难解决方法(0)
display:inline-flex和display:flex之间有什么区别？
我试图垂直对齐ID包装器中的元素.我将属性display:inline-flex;赋予此ID,因为ID包装器是flex容器.
但是演示文稿没有区别.我希望能够显示包装器ID中的所有内容inline.为什么不呢？
#wrapper {
display: inline-flex;
/*no difference to display:flex; */
}<body>
<div id="wrapper">
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
<footer>footer</footer>
</div>
</body>291
推荐指数
推荐指数
7
解决办法
解决办法
23万
查看次数
查看次数
CSS网格布局中的等高行
我认为使用Flexbox是不可能实现的,因为每行只能是适合其元素所需的最小高度,但是可以使用较新的CSS Grid实现吗？
为了清楚起见,我希望所有行中网格中的所有元素具有相同的高度,而不是每行.基本上,最高的"细胞"应该决定所有细胞的高度,而不仅仅是其行中的细胞.
75
推荐指数
推荐指数
2
解决办法
解决办法
6万
查看次数
查看次数
Flex容器中的等高行
如你所见,list-items第一个row有相同的height.但是第二个项目row有所不同heights.我希望所有物品都有制服height.
有没有办法实现这一点,而不给出固定高度,只使用flexbox？
这是我的 code
.list {
display: flex;
flex-wrap: wrap;
max-width: 500px;
}
.list-item {
background-color: #ccc;
display: flex;
padding: 0.5em;
width: 25%;
margin-right: 1%;
margin-bottom: 20px;
}
.list-content {
width: 100%;
}<ul class="list">
<li class="list-item">
<div class="list-content">
<h2>box 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</li>
<li class="list-item">
<div class="list-content">
<h3>box 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing …61
推荐指数
推荐指数
5
解决办法
解决办法
7万
查看次数
查看次数
布局类似于表的弹性框？
我正在使用内部开发的框架,这取决于HTML的某种结构.其中一个棘手的问题是每一行都需要自己的容器以及它自己的类和数据属性.
所以这就是问题所在.如果不彻底改变DOM,我怎样才能使下面的flex框渲染基本上像HTML表一样？或者是一张桌子唯一的方法？该解决方案必须适用于IE11和Chrome.
我试图让它看起来像这样......
Column A | Column B | Column C
1 | 2 | 3
section {
display: flex;
flex-wrap: wrap;
}
section .col {
flex: 1 1 auto;
}
section .line-break {
flex-basis: 100%;
width: 0px;
height: 0px;
overflow: hidden;
}<html>
<head>
</head>
<body>
<section>
<header>
<div class="col">Column A</div>
<div class="col">Column B</div>
<div class="col">Column C</div>
</header>
<div class="line-break"></div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</section>
</body>
</html>13
推荐指数
推荐指数
3
解决办法
解决办法
2万
查看次数
查看次数