- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
考虑伸缩容器的主轴和横轴:
资料来源:W3C
要沿主轴对齐弹性项目,有一个属性:justify-content
要沿交叉轴对齐弹性项目,需要三个属性:align-content
align-items
align-self
在上图中,主轴是水平的,而横轴是垂直的。这些是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
属性?
#box3 { align-self: flex-end; justify-self: flex-end; }
justify-content: flex-end
),但让第一项左对齐(
justify-self: flex-start
)
justify-self
时,徽标可以向左对齐,而导航项保持在最右侧,并且整个对象可以平滑调整(“弯曲度”)以适应不同的屏幕尺寸。
justify-content: center
),并将相邻的项目与容器边缘对齐(
justify-self: flex-start
和
justify-self: flex-end
)。
space-around
和
space-between
justify-content
属性将不会使中间项目位于容器的中心。
#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.box {
height: 50px;
width: 75px;
background-color: springgreen;
}
.box1 {
width: 100px;
}
.box3 {
width: 200px;
}
#center {
text-align: center;
margin-bottom: 5px;
}
#center > span {
background-color: aqua;
padding: 2px;
}
<div id="center">
<span>TRUE CENTER</span>
</div>
<div id="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<p>note that the middlebox will only be truly centered if adjacent boxes are equal width</p>
justify-self
或
justify-items
。
justify-self
和
justify-items
...,但对于flexbox却没有考虑。
最佳答案
沿主轴对齐弹性项目的方法
如问题中所述:
要沿主轴对齐弹性项目,有一个属性:justify-content
要沿横轴对齐弹性项目,需要三个属性:align-content
,align-items
and align-self
。
然后问题问:
为什么没有justify-items
和justify-self
属性?
一个答案可能是:因为没有必要。
flexbox specification提供了两种沿主轴对齐弹性项目的方法:justify-content
关键字属性,以及auto
margins
证明内容justify-content
属性使flex项目沿着flex容器的主轴对齐。
它应用于flex容器,但仅影响flex项目。
有五个对齐选项:flex-start
〜Flex项目包装在行的开头。flex-end
〜Flex项目包装在行尾。center
〜Flex项目被包装到行的中心。space-between
〜Flex项目均匀间隔,第一个项目与容器的一个边缘对齐,最后一个项目与相对的边缘对齐。第一项和最后一项使用的边取决于flex-direction
和writing mode(ltr
或rtl
)。space-around
〜与space-between
相同,但两端均留有半角空格。
自动保证金
使用auto
margins,弹性项目可以居中,隔开或打包成子组。
与应用于弹性容器的justify-content
不同,在弹性项目上使用auto
边距。
它们通过消耗指定方向上的所有可用空间来工作。
将一组弹性项目向右对齐,但将第一项向左对齐
问题的场景:
使一组弹性项目右对齐(justify-content: flex-end
)
但第一项要左对齐(justify-self: flex-start
)
考虑带有一组导航项和徽标的标题部分。用
justify-self
导航项保留时,徽标可以向左对齐
最右端,整个过程会平滑地调整(“弯曲”)为
不同的屏幕尺寸。
其他有用的方案:
将弹性项目放在角落
问题的场景:
将弹性项目放在角落.box { align-self: flex-end; justify-self: flex-end; }
将弹性项目垂直和水平居中margin: auto
是justify-content: center
和align-items: center
的替代。
代替在flex容器上的此代码:
.container {
justify-content: center;
align-items: center;
}
.box56 {
margin: auto;
}
justify-content: center
)的中心,并对齐相邻的
justify-self: flex-start
和
justify-self: flex-end
)。
space-around
属性上的
space-between
和
justify-content
值不会使中间项目相对于容器居中。
flex-direction
),否则中间项目无法真正居中。这个问题为
justify-self
属性(当然是设计用来处理任务)提供了强有力的理由。
#container {
display: flex;
justify-content: space-between;
background-color: lightyellow;
}
.box {
height: 50px;
width: 75px;
background-color: springgreen;
}
.box1 {
width: 100px;
}
.box3 {
width: 200px;
}
#center {
text-align: center;
margin-bottom: 5px;
}
#center > span {
background-color: aqua;
padding: 2px;
}
<div id="center">
<span>TRUE CENTER</span>
</div>
<div id="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
<p>The middle box will be truly centered only if adjacent boxes are equal width.</p>
justify-content: center
将中间项目居中,并完全定位外部项目。
.container {
display: flex;
}
.box {
flex: 1;
display: flex;
justify-content: center;
}
.box71 > span { margin-right: auto; }
.box73 > span { margin-left: auto; }
/* non-essential */
.box {
align-items: center;
border: 1px solid #ccc;
background-color: lightgreen;
height: 40px;
}
<div class="container">
<div class="box box71"><span>71 short</span></div>
<div class="box box72"><span>72 centered</span></div>
<div class="box box73"><span>73 loooooooooooooooong</span></div>
</div>
.container
)是flex容器。
.box
)都是一个弹性项目。
.box
项目赋予
flex: 1
,以平均分配容器空间。
justify-content: center
。
span
元素都是一个居中的flex项目。
auto
边距左右移动外部
span
。
justify-content
并仅使用
auto
边距。
justify-content
可以在这里工作,因为
auto
边距始终具有优先级。从规格:
auto
margins
justify-content
和
align-self
对齐之前,任何
justify-content
一分钟,这里是一个更多选择的想法。
space-same
〜
space-between
和
space-around
的混合体。伸缩项的间距均匀(如
space-between
),除了两端没有半角空格(如
space-around
)外,两端还有全角空格。
::before
和
::after
伪元素来实现此布局。
space-evenly
,从而完成了上述任务。有关详细信息,请参见此帖子:
Equal space between flex items
关于css - 在CSS Flexbox中,为什么没有“justify-items”和“justify-self”属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59555772/
让我们写一个简单的类在我的脑海中解释: class SomeClass { var happyToUsed = 10 } 并创建一个对象 let someObject = SomeClass(
采用 self 的方法与采用 &self 甚至 &mut self 的方法有什么区别? 例如 impl SomeStruct { fn example1(self) { } fn ex
请观察以下代码(Win10上的python 3.6,PyCharm),函数thread0(self)作为线程成功启动,但是 thread1(self)似乎与thread0(self)不同已设置。 se
backbone.js 开始于: //Establish the root object, `window` (`self`) in the browser, or `global` on the s
做的事: self = self.init; return self; 在 Objective-C 中具有相同的效果: self.init() 快速? 例如,在这种情况下: else if([form
我查看了关于堆栈溢出的一些关于使用[weak self]和[unowned self]的问题的评论。我需要确保我理解正确。 我正在使用最新的 Xcode - Xcode 13.4,最新的 macOS
我面临在以下模型类代码中的 self.init 调用或分配给 self 之前使用 self 的错误tableview单元格项目,它发生在我尝试获取表格单元格项目的文档ID之后。 应该做什么?请推荐。
晚上好。 我对在 Swift 中转义(异步)闭包有疑问,我想知道哪种方法是解决它的最佳方法。 有一个示例函数。 func exampleFunction() { functionWithEsca
我需要在内心深处保持坚强的自我。 我知道声明[weak self]就够了外封闭仅一次。 但是guard let self = self else { return }呢? ,是否也足以为外部闭包声明一
代码 use std::{ fs::self, io::self, }; fn rmdir(path: impl AsRef) -> io::Result { fs::remo
我检查了共享相同主题的问题,但没有一个解决我遇到的这种奇怪行为: 说我有一个简单的老学校struct : struct Person { var name: String var age:
我应该解释为什么我的问题不是重复的:TypeError: can only concatenate list (not “str”) to list ...所以它不是重复的,因为该帖子处理代码中出现的
我有一个 trait,它接受一个类型参数,我想说实现这个 trait 的对象也会符合这个类型参数(使用泛型,为了 Java 的兼容性) 以下代码: trait HandleOwner[SELF
这个问题在这里已经有了答案: Why would a JavaScript variable start with a dollar sign? [duplicate] (16 个答案) 关闭 8
我总是找到一些类似的代码newPromise.promiseDispatch.apply(newPromise, message),我不明白为什么不使用newPromise.promiseDispat
我看到类似的模式 def __init__(self, x, y, z): ... self.x = x self.y = y self.z = z ... 非
mysql查询示例: SELECT a1.* FROM agreement a1 LEFT JOIN agreement a2 on a1.agreementType = a2.agreementTy
self.delegate = self; 这样做有什么问题吗?正确的做法是什么? 谢谢,尼尔。 代码: (UITextField*)initWith:(id)sender:(float)X:(flo
为什么要声明self在类中需要的结构中不需要?我不知道是否还有其他例子说明了这种情况,但在转义闭包的情况下,确实如此。如果闭包是非可选的(因此是非转义的),则不需要声明 self在两者中的任何一个。
这个问题已经有答案了: What does the ampersand (&) before `self` mean in Rust? (1 个回答) 已关闭去年。 我不清楚 self 之间有什么区别
我是一名优秀的程序员,十分优秀!