相关疑难解决方法(0)
如何为所有浏览器垂直居中div？
我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.
<body>
<div>Div to be aligned vertically</div>
</body>
如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中？
推荐指数
解决办法
查看次数
在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？
考虑flex容器的主轴和横轴:
资料来源:W3C
要沿主轴对齐flex项,有一个属性:
要沿横轴对齐flex项,有三个属性:
在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.
但是,这些方向可以很容易地与flex-direction财产互换.
/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;
/* main axis is vertical, cross axis is horizontal */
flex-direction: column;
flex-direction: column-reverse;
(横轴始终垂直于主轴.)
我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.
那么为什么横轴有两个额外的对齐属性呢？
为什么align-content并且align-items合并为主轴的一个属性？
为什么主轴没有justify-self属性？
这些属性有用的场景:
将flex项放在flex容器的角落
#box3 { align-self: flex-end; justify-self: flex-end; }制作一组flex项目align-right(
justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)考虑带有一组导航项和徽标的标题部分.随着
justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.在一排三个柔性物品中,将中间物品粘贴到容器的中心(
justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …
推荐指数
解决办法
查看次数
Flexbox:水平和垂直居中
如何使用flexbox在容器中水平和垂直居中div.在下面的例子中,我希望每个数字彼此相同(在行中),它们是水平居中的.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}<div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div>推荐指数
解决办法
查看次数
align-content和align-items之间有什么区别？
任何人都可以告诉我之间的差异align-items和align-content？
推荐指数
解决办法
查看次数
在flexbox中使div填充剩余*水平*空间
我在flexbox中有两个div并排.右手应该总是相同的宽度,我希望左手一个只抓住剩余的空间.但除非我专门设定其宽度,否则它不会.
所以目前,它设置为96%,看起来没问题,直到你真的挤压屏幕 - 然后右手div有点缺乏它所需的空间.
我想我可以保留它,但它感觉不对 - 就像必须有一种说法:
合适的人总是一样的; 你在左边 - 你得到了剩下的一切
.ar-course-nav {
cursor: pointer;
padding: 8px 12px 8px 12px;
border-radius: 8px;
}
.ar-course-nav:hover {
background-color: rgba(0, 0, 0, 0.1);
}<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does …推荐指数
解决办法
查看次数
使flex项目占用内容宽度,而不是父容器的宽度
我有一个容器<div>用display: flex.它有一个孩子<a>.
如何让孩子显得"内联"？
具体来说,如何让孩子的宽度由其内容决定,而不是扩展到父母的宽度？
我尝试了什么:
我把孩子设置为display: inline-flex,但它仍占用了整个宽度.我也尝试了所有其他显示属性,但没有任何效果.
例:
.container {
background: red;
height: 200px;
flex-direction: column;
padding: 10px;
display: flex;
}
a {
display: inline-flex;
padding: 10px 40px;
background: pink;
}<div class="container">
<a href="#">Test</a>
</div>推荐指数
解决办法
查看次数
float在flex容器中不起作用
我想在页脚元素的右侧放置文本(foo链接).
我需要保留页脚显示flex.
但是当我把它设置为flex,float:right因为span不再起作用了.
<footer style="display: flex;">
<span style="text-align: right;float: right;">
<a>foo link</a>
</span>
</footer>推荐指数
解决办法
查看次数
包裹时,删除多行柔性物品之间的空隙(间隙)
我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.
这是个主意:
我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:
问题是列之间存在很大差距.
我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.
有什么方法可以解决这个问题吗？
这是代码:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.container {
display: flex;
flex-wrap: wrap;
height: 300px;
flex-direction: column;
background-color: #ccc;
}
.items {
width: 100px;
height: 100px;
margin: 10px;
background-color: tomato;
color: white;
font-size: 60px;
font-weight: bold;
text-align: center;
padding: 15px;
}<div class="container">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
</div>推荐指数
解决办法
查看次数
align-self:flex-end不将项目移动到底部
正如你在这里看到的:JSFiddle
我希望作者div位于其父容器的底部.我尝试过,align-self: flex-end;但它不起作用.我究竟做错了什么？
.flexbox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
display: flex;
flex-direction: column;
width: 100px;
border: 1px solid #000;
padding: 10px;
}
.item .author {
width: 100%;
align-self: flex-end;
border: 1px solid #000;
}<div class="flexbox">
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div>
<div class="content">
Content<br>Content
</div>
<div class="author">
Author
</div>
</div>
<div class="item">
<div class="title">
Title
</div> …推荐指数
解决办法
查看次数
垂直居中并左对齐一列弹性项目
要求
- Flexbox的
- 垂直中间
- 水平左
- 垂直堆积的儿童元素
- 子元素的数量可以是一个或多个
- 使用旧语法,以便Android 4.2了解
听起来很难描述.演示中的粉红色框是我想要的外观.绿色框已经很好了,只是我不知道如何处理多个子元素.
我认为解决方案可能是以下的组合,但我无法做到.
align-items: center;
flex-direction: column;
body {
margin: 1em .5em;
}
article {
display: flex;
align-items: center;
flex-wrap: wrap;
}
section {
height: 18em;
background: #ccc;
margin: 0 .5em;
position: relative;
display: flex;
align-items: center;
}
section:after {
font-size: smaller;
color: blue;
position: absolute;
bottom: 0;
}
section.big {
width: 20%;
height: 5em;
}
section.small {
width: 10%;
flex: 1;
}
section div {
outline: 1px dotted green;
}
section.want { …推荐指数
解决办法
查看次数