中心和底部对齐弹性项目 [英] Center and bottom-align flex items
问题描述
display：flex;
justify-content：center;
align-items：center;
flex-wrap：nowrap;
因此，它的孩子们（淡蓝色方块）按照下面的方式排列。但是，我想从正常流程中添加另一个孩子（绿色方块），并将其放置在父母的相对位置。如下所示，我最好写下如下的代码： bottom：20px; 和 margin：auto; 。
我试着玩 z -index 无济于事。我应该如何处理这个？我应该创建另一个父元素吗？
下面是实现这个布局的五个选项：
- CSS定位
- 带有不可见DOM元素的Flexbox
- 带有不可见元素的Flexbox
- Flexbox与
flex：1 - CSS网格布局
方法1：CSS Positioning Properties
position：relative 给flex容器。
应用 现在，绿色方块完全位于flex容器中。 更具体地说，绿色正方形从文档流中移除，但仍然在 最近定位的祖先 。 使用CSS偏移属性 一个警告：一些浏览器可能无法从正常流程中完全删除绝对定位的Flex项目。这以非标准的，意想不到的方式改变了对齐。更多详细信息：绝对定位的Flex项目不会从Firefox中的正常流程中移除。 IE11 结合使用 新的弹性项目是相同的底部项目，并放置在另一端（顶部）。 更具体地说，因为flex对齐是基于free空间，新的项目是一个必要的平衡，以保持三个蓝色方块垂直居中。新项目必须与现有绿色项目的高度相同，否则蓝色框将不会精确居中。 新项目从视图中移除 总之： 这个方法和＃2很相似，不过它的语义更清晰，绿框的高度必须是已知的。 方法4：将 从上面的方法＃2或＃3开始，不必担心顶部和底部物品的高度保持相等，只要给每一个 然后，您可以添加 这可能是最干净和最有效的方法。不需要绝对定位，假元素或其他hackery。 只需创建一个三行的网格。然后居中对齐第二和第三行中的项目。 I have a flex container (the blue square) with the following properties: Therefore, its children (the light blue squares) arrange themselves as you see below. However, I'd like to add another child (the green square) out of the normal flow and position it relative to its parent. To position it as you see below, I'd ideally write something like I tried to play around with Below are five options for achieving this layout:
Apply Apply Now the green square is absolutely positioned within the flex container. More specifically, the green square is removed from the document flow but stays within the bounds of the nearest positioned ancestor. Use the CSS offset properties
One caveat: Some browsers may not completely remove an absolutely-positioned flex item from the normal flow. This changes the alignment in a non-standard, unexpected way. More details: Absolutely positioned flex item is not removed from normal flow in Firefox & IE11 With a combination of The new flex item is identical to the bottom item and is placed at the opposite end (the top). More specifically, because flex alignment is based on the distribution of free space, the new item is a necessary counterbalance to keep the three blue boxes vertically centered. The new item must be the same height as the existing green item, or the blue boxes won't be precisely centered. The new item is removed from view with In short:
This method is similar to #2, except it's cleaner semantically and the height of the green box must be known.
Starting with Method #2 or #3 above, instead of worrying about equal height for the top and bottom items to maintain equal balance, just give each one You can then add This may be the cleanest and most efficient method. There is no need for absolute positioning, fake elements or other hackery. Simply create a grid with three rows. Then center-align the items in the second and third rows. The first row can remain empty.
这篇关于中心和底部对齐弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ position：absolute
top ， bottom ， left 和 right 来移动绿色方块。
flex-container {display：flex; justify-content：center; align-items：center; flex-wrap：nowrap;位置：相对;边框：4px纯蓝色;身高：300px; width：300px;} flex-container> flex-item：first-child {display：flex;} flex-container> flex-item：first-child> flex-item {border：4px solid aqua; height：50px;宽度：50px; margin：0 5px;} flex-container> flex-item：last-child {position：absolute;底部：40px;剩下：50％; transform：translateX（-50％）; / *微调水平居中* /边界：4px固体黄绿色; height：50px; width：50px;} < flex-container> < flex-item><！ - 也是flex容器 - > <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < /柔性项> < flex-item>< / flex-item>< / flex-container>
方法2：Flex Auto Margins&隐藏的Flex项目（DOM元素）
auto 页边距以及一个新的，不可见的flex项目可以实现布局。
可见度：隐藏。
auto 页边空白以保持蓝色框居中，两个绿色框从两端创建均衡的平衡。
visibility：hidden $ b
flex-container {display：flex; flex-direction：column; align-items：center;边框：4px纯蓝色;身高：300px; width：300px;} flex-container> flex-item：first-child {margin-top：auto; visibility：hidden;} flex-container> flex-item：第n个孩子（2）{margin-top：auto; display：flex;} flex-container> flex-item：last-child {margin-top：auto; margin-bottom：auto;} flex-container> flex-item：first-child，flex-container> flex-item：last-child {border：4px solid chartreuse; height：50px; width：50px;} flex-container> flex-item：第n个孩子（2）> flex-item {border：4px solid aqua; height：50px;宽度：50px; margin：0 5px;} < flex-container> <挠曲项>< /柔性项> < flex-item><！ - 也是flex容器 - > <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < /柔性项> < flex-item>< / flex-item>< / flex-container>
方法＃3：Flex Auto Margins&不可见的Flex项目（伪元素）
:: 。
auto 边距保留蓝盒子为中心，绿色的伪和DOM元素从两端创建平衡。
flex-container {display：flex; flex-direction：column; align-items：center;边框：4px纯蓝色;身高：300px; width：300px;} flex-container :: before {content：; margin-top：auto;高度：calc（50px + 8px）; / *高度+边框* / visibility：hidden;} flex-container> flex-item：first-child {margin-top：auto; display：flex;} flex-container> flex-item：last-child {margin-top：auto; margin-bottom：auto; border：4px solid chartreuse; height：50px; width：50px;} flex-container> flex-item：first-child> flex-item {border：4px solid aqua; height：50px;宽度：50px; margin：0 5px;} < flex-container> < flex-item><！ - 也是flex容器 - > <挠曲项>< /柔性项> <挠曲项>< /柔性项> <挠曲项>< /柔性项> < /柔性项> < flex-item>< / flex-item>< / flex-container> flex：1 添加到顶部和底部项目
$ b
$ b flex：1 。这将迫使他们都消耗可用空间，从而居中中间项目。
显示：flex 到底部项目，以便对齐内容。
方法5：CSS网格布局
grid-container {display：grid; grid-template-rows：repeat（3，1fr）; align-items：center; justify-items：center;边框：4px纯蓝色;身高：300px; grid-item：nth-child（2）{display：flex;} grid-item：nth-child（2）> flex-item {width：50px; height：50px;保证金：0 5px; border：4px solid aqua;} grid-item：nth-child（3）{border：4px solid chartreuse; height：50px; width：50px;} display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
bottom: 20px; and margin: auto;.z-index to no avail. How should I approach this? Should I resort to creating another parent element?
flex: 1
Method #1: CSS Positioning Properties
position: relative to the flex container.position: absolute to the green flex item.top, bottom, left and right to move the green square around.flex-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
position: relative;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
display: flex;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}
flex-container > flex-item:last-child {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%); /* fine tune horizontal centering */
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Method #2: Flex Auto Margins & Invisible Flex Item (DOM element)
auto margins and a new, invisible flex item the layout can be achieved.visibility: hidden.
auto margins to keep the blue boxes centered, with both green boxes creating equal balance from both ends.visibility: hidden to the duplicate green box.flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container > flex-item:first-child {
margin-top: auto;
visibility: hidden;
}
flex-container > flex-item:nth-child(2) {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
}
flex-container > flex-item:first-child,
flex-container > flex-item:last-child {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:nth-child(2) > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}<flex-container>
<flex-item></flex-item>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element)
::before.auto margins to keep the blue boxes centered, with the green pseudo and DOM elements creating equal balance from both ends.flex-container {
display: flex;
flex-direction: column;
align-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
flex-container::before {
content: "";
margin-top: auto;
height: calc(50px + 8px); /* height + borders */
visibility: hidden;
}
flex-container > flex-item:first-child {
margin-top: auto;
display: flex;
}
flex-container > flex-item:last-child {
margin-top: auto;
margin-bottom: auto;
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}
flex-container > flex-item:first-child > flex-item {
border: 4px solid aqua;
height: 50px;
width: 50px;
margin: 0 5px;
}<flex-container>
<flex-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-item>
<flex-item></flex-item>
</flex-container>
Method #4: Add
flex: 1 to top and bottom itemsflex: 1. This will force them both to consume available space, thus centering the middle item.display: flex to the bottom item in order to align the content.
Method #5: CSS Grid Layout
grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
align-items: center;
justify-items: center;
border: 4px solid blue;
height: 300px;
width: 300px;
}
grid-item:nth-child(2) {
display: flex;
}
grid-item:nth-child(2)>flex-item {
width: 50px;
height: 50px;
margin: 0 5px;
border: 4px solid aqua;
}
grid-item:nth-child(3) {
border: 4px solid chartreuse;
height: 50px;
width: 50px;
}<grid-container>
<grid-item></grid-item>
<grid-item><!-- also flex container -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</grid-item>
<grid-item></grid-item>
</grid-container>
登录 关闭
