Home 前端/建站css #CSS备忘录:flex布局在实际应用中的几个有用细节

#CSS备忘录:flex布局在实际应用中的几个有用细节

by Kevin
0 comment 84 views

使用flex:0 0 *%;来控制布局占比

父级元素设置display:flex;后,子元素设置flex:0 0 *%;来控制布局占比

//上图左边sidebar设置占比18%;
.content{
    display: flex;
}
.sidebar{
    flex: 0 0 18%;
}

//上图左边sidebar设置占比18%;

使用margin-right:auto 来使右边距占据剩余空间

父级元素设置display:flex;后,子元素设置margin-right:auto来使右边距占据剩余空间(把下个兄弟元素挤到右边)

//上图五角星部分设置margin-right: auto;
.overview {
    display: flex;
}
.overview__stars {
    margin-right: auto;
}
//上图五角星部分设置margin-right: auto;

Related Articles

Leave a Comment