相关疑难解决方法(0)
在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>推荐指数
解决办法
查看次数
Flexbox代码适用于除Safari之外的所有浏览器.为什么？
带有列表标签的网格列,我需要每3列以正确的顺序显示,并为每个额外的HTML列表元素启用自动宽度.
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style><ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>display: -webkit-flex;.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
重要的是我到目前为止我的Safari浏览器工作,我似乎无法解决这个问题,我会适当的任何帮助:)
测试链接:
推荐指数
解决办法
查看次数
CSS等高柱
我想在我的css表中使用百分比.不幸的是,它对我不起作用.
这段代码出了什么问题？我应该使用flexbox而不是table吗？
我想用表,因为我想要相同的高度列.
ul {
list-style: none;
margin: 0;
display: table;
table-layout: fixed;
width: 100%;
}
li {
width: 50%;
display: table-cell;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>推荐指数
解决办法
查看次数