flex布局主轴元素单独设置对齐方式

来源:互联网 发布:csgo 优化 编辑:程序博客网 时间:2024/04/30 10:40
  • 今天用flex布局,想在主轴上设置某个flex-item右对齐,其他的左对齐,我以为直接用align-self属性就可以了,结果没效果,后来仔细阅读文档,发现align-self属性是用在单个元素的交叉轴的设置上,主轴元素没有找到设置单个元素的属性。
  • 我要的效果是这样的(主轴方向为水平方向)
  • 这里写图片描述
  • 但是实际效果所有元素左对齐
  • 这里写图片描述
  • 于是我就对最右边的元素设置以下css就成功了
.inline-field.inline-field-add{    flex-grow: 1;//这三个元素只有它在有空余空间时可伸缩,也就是它占据了所有剩余空间    display: flex;//将它设置为flex,就可以单独对他进行主轴右对齐    justify-content: flex-end;}
0 0
原创粉丝点击