对齐弹性容器中的弹性项目

您所在的位置:网站首页 css文本垂直对齐方式 对齐弹性容器中的弹性项目

对齐弹性容器中的弹性项目

#对齐弹性容器中的弹性项目| 来源: 网络整理| 查看: 265

我们想要处理个别弹性项目在主轴上的对齐,但是没有 justify-items 属性或者 justify-self 属性可用,因为弹性项目会被当成一个组来对齐。然而,我们可以使用自动的外边距来处理一些个别弹性项目或者一组弹性项目想和其他弹性项目分离开的对齐情况。

一个常见的案例是导航栏,一些重要项目右对齐,而一组其他主要项目左对齐。你可能会想,这个时候就需要一个 justify-self 属性。但是下面的情况,如图所示,有 3 个项目在左边,2 个在右边。假设可以在项目 d 上设置 justify-self 的话,那么跟在后面的项目 e 的对齐方式也会发生改变。可能这正是我们想要的效果,但某些时候并不是。

另一个办法是,单独把项目 d 的 margin-left 属性设置成 auto。自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。两边尽可能占据多的空间,块就被置于中间位置了。

在下面这个在线例子中,弹性项目按默认方式简单地沿行排列,而样式类 push 有设置有 margin-left: auto。你可以尝试删除它,或者把这个类名加到别的弹性项目上,你会看到它是怎样影响弹性项目排列的。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3