一、背景
在flex布局中,我们使用父级元素的display
和justify-content
来实现flex布局,并设定主轴对其方式,这两个属性详见flex布局-阮一峰
.box {
display: flex;
justify-content: flex-start;
}
这时设置了justify-content
以后,所有的子元素都沿着主轴起始位置对齐,如果某一个子元素需要沿其他方向,比如主轴是横轴,方向是从左向右,这样设置以后,所有子元素都在左边向右边排列,如果我某一个子元素需要放在最右边,而不是和其他子元素一样顺着排列,应该如何实现?
对于交叉轴的方向,有align-center
属性设置,而子元素的align-self
属性可以覆盖这个属性,设置属于子元素自身的交叉在对齐方向。但主轴的对其方向则没有这个属性。
二、实现
我可以通过设置需要区别于其他方向的子元素的前一个兄弟元素的margin来实现这个需求。
比如
原本的
jusity-content
是flex-start
,而其中27 28 29 30需要右对齐,这时设置26的右外边距可以实现。参考: [https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609
]