flex布局,实现子元素在主轴上单独排列
flex布局中,是通过在容器上设置justify-content属性来规定子元素在容器中主轴上的排列方式而如果要单独设置子元素的排列方式,则可以通过子元素的margin属性实现,例如:.container {display: flex;justify-content: space-between;}.item2 {margin-left: 10px;margin-right: auto;}就实现了
·
flex布局中,是通过在容器上设置justify-content
属性来规定子元素在容器中主轴上的排列方式
而如果要单独设置子元素的排列方式,则可以通过子元素的margin
属性实现,例如:
.container {
display: flex;
justify-content: space-between;
}
.item2 {
margin-left: 10px;
margin-right: auto;
}
就实现了container下item2子元素单独靠左排列(且距离左侧10px),其他子元素间隔排列
同理,设置margin-left: auto; margin-right: 0;
,就可实现子元素单独靠右排列(且距离右侧0px)
更多推荐
已为社区贡献1条内容
所有评论(0)