html – 居中和底部对齐弹性项目
我有一个Flex容器(蓝色方块),具有以下属性:
display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; 因此,它的孩子(浅蓝色方块)如下所示排列自己。但是,我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位。如下所示定位它,我最好写一些像bottom:20px;和保证金:auto;。 我试图玩z-index无济于事。我该怎么办呢?我应该求助于创建另一个父元素吗? 解决方法
以下是实现此布局的五个选项:
> CSS定位 方法#1:CSS定位属性 应用位置:相对于flex容器。 将位置:绝对应用于绿色弹性项目。 现在绿色方块绝对位于flex容器内。 更具体地说,绿色方块从文档流中移除,但仍保持在nearest positioned ancestor的范围内。 使用顶部,底部,左侧和右侧的CSS偏移属性移动绿色方块。 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> 一个警告:某些浏览器可能无法从正常流程中完全删除绝对定位的弹性项目。这会以非标准的,意外的方式更改对齐方式。更多细节:Absolutely positioned flex item is not removed from normal flow in Firefox & IE11 方法#2:Flex Auto Margins&隐形Flex项目(DOM元素) 通过结合使用 新的柔性项目与底部项目相同,并放置在另一端(顶部)。 更具体地说,因为柔性对准基于自由空间的分布,所以新项目是必要的平衡以保持三个蓝色框垂直居中。新项目必须与现有绿色项目的高度相同,否则蓝色框将不会精确居中。 新视图已从视图中删除,其中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> 方法#3:Flex Auto Margins&隐形Flex项目(伪元素) 这种方法类似于#2,除了它在语义上更清洁,并且必须知道绿箱的高度。 >创建一个与现有绿色框具有相同高度的伪元素。 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> 方法#4:将flex:1添加到顶部和底部项目 从上面的方法#2或#3开始,不要担心顶部和底部物品的高度相等以保持平衡,只需给每个物品弯曲:1。这将迫使它们消耗可用空间,从而使中间物品居中。 然后,您可以将display:flex添加到底部项目以对齐内容。 方法#5:CSS网格布局 这可能是最干净,最有效的方法。不需要绝对定位,虚假元素或其他hackery。 只需创建一个包含三行的网格。然后居中对齐第二行和第三行中的项目。第一行可以保持为空。 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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |