[英]Center and bottom-align flex items
I have a flex container (the blue square) with the following properties:我有一个具有以下属性的 flex 容器(蓝色方块):
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
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
bottom: 20px;
要像下面看到的那样定位它,我最好写一些类似
bottom: 20px;
东西bottom: 20px;
and margin: auto;
和
margin: auto;
. .
I tried to play around with z-index
to no avail.我试图玩弄
z-index
无济于事。 How should I approach this?我应该如何处理这个问题? Should I resort to creating another parent element?
我应该求助于创建另一个父元素吗?
Below are five options for achieving this layout:以下是实现此布局的五个选项:
flex: 1
flex: 1
Flexbox flex: 1
Apply position: relative
to the flex container.应用
position: relative
对于 flex 容器。
Apply position: absolute
to the green flex item.将
position: absolute
应用到绿色 flex 项目。
Now the green square is absolutely positioned within the flex container.现在绿色方块绝对位于 flex 容器内。
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 top
, bottom
, left
and right
to move the green square around.使用 CSS 偏移属性
top
、 bottom
、 left
和right
来移动绿色方块。
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>
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
更多细节:绝对定位的弹性项目不会从 Firefox 和 IE11 的正常流程中删除
With a combination of auto
margins and a new, invisible flex item the layout can be achieved.通过结合
auto
边距和一个新的、不可见的弹性项目,可以实现布局。
The new flex item is identical to the bottom item and is placed at the opposite end (the top).新的 flex item 与底部 item 相同,并放置在另一端(顶部)。
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.更具体地说,因为 flex 对齐是基于自由空间的分布,新项目是保持三个蓝色框垂直居中的必要平衡。 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 visibility: hidden
.新项目从视图中移除,
visibility: hidden
。
In short:简而言之:
auto
margins to keep the blue boxes centered, with both green boxes creating equal balance from both ends.auto
margins 保持蓝色框居中,两个绿色框从两端创建相等的平衡。visibility: hidden
to the duplicate green box.visibility: hidden
到重复的绿色框。 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>
This method is similar to #2, except it's cleaner semantically and the height of the green box must be known.这种方法与#2 类似,但它在语义上更清晰,并且必须知道绿色框的高度。
::before
.::before
将其放在容器的开头。auto
margins to keep the blue boxes centered, with the green pseudo and DOM elements creating equal balance from both ends.auto
margins 保持蓝色框居中,绿色伪元素和 DOM 元素从两端创建相等的平衡。 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>
flex: 1
to top and bottom itemsflex: 1
添加到顶部和底部项目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 flex: 1
.从上面的方法 #2 或 #3 开始,不要担心顶部和底部项目的高度相等以保持平衡,只需给每个项目
flex: 1
。 This will force them both to consume available space, thus centering the middle item.这将迫使它们都消耗可用空间,从而使中间项目居中。
You can then add display: flex
to the bottom item in order to align the content.然后,您可以将
display: flex
添加到底部项目以对齐内容。
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.
第一行可以保持为空。
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>
let the container with position: relative
and the green square with position:absolute;
让带有
position: relative
的容器和带有position:absolute;
的绿色方块position:absolute;
body { margin: 0; } #container { display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; width: 192px; height: 192px; border: 4px solid indigo; position: relative; background: lavender; } .blue { margin: 10px; width: 30px; height: 30px; outline: 4px solid skyblue; background: honeydew; } #green { position: absolute; width: 30px; height: 30px; left: 0; right: 0; margin: auto; bottom: 20px; outline: 4px solid yellowgreen; background: greenyellow; }
<div id=container> <div class=blue></div><div class=blue></div><div class=blue></div> <div id=green></div> </div>
you can use a pseudo to move down one row the first three containers then applie a margin:auto
to last one您可以使用伪指令将前三个容器向下移动一行,然后将
margin:auto
到最后一个
div { display:flex; flex-wrap:wrap; border:#0066FD solid;; width:200px; height:200px; justify-content:space-around; /* show me box center */ background:linear-gradient(to top,rgba(0,0,0,0.2) 50%, transparent 50%),linear-gradient(to left,rgba(0,0,0,0.2) 50%, transparent 50%) } span, div:before { width:50px; height:50px; border:solid #01CDFF; margin:0 auto 0; } span:last-of-type , div:before{ margin: 12px auto; border:solid #01FE43; } div:before { content:''; width:100%; border:none; } span { /* show me box center */ background:linear-gradient(45deg,rgba(0,0,0,0.1) 50%, transparent 50%),linear-gradient(-45deg,rgba(0,0,0,0.1) 50%, transparent 50%) }
<div> <span></span> <span></span> <span></span> <span></span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.