css

当前位置:首页 > 前端 > css

flex 布局

.xypg-left-nav { position: relative; flex: 0 0 310px;}flex: 0 0 310px;:这是 flex 简写属性,包含三个值:flex-g...
.xypg-left-nav {
    position: relative;
    flex: 0 0 310px;
}

flex: 0 0 310px;:这是 flex 简写属性,包含三个值:

flex-grow(第一个值 0):定义 flex 项目的放大比例。此处为 0,意味着该项目不会在容器中放大。
flex-shrink(第二个值 0):定义 flex 项目的缩小比例。此处为 0,意味着该项目不会在容器中缩小。
flex-basis(第三个值 310px):定义 flex 项目的初始大小。此处为 310px,表示此项目将占据 310 像素的宽度。


.xypg-right-content {
    position: relative;
    flex: 1;
}
flex: 1;:这是 flex 简写属性,包含一个值,相当于 flex: 1 1 0;:

flex-grow(第一个值 1):定义 flex 项目的放大比例。此处为 1,意味着该项目可以在容器中放大,占用剩余空间。
flex-shrink(第二个值 1):定义 flex 项目的缩小比例。此处为 1,意味着该项目可以在容器中缩小。
flex-basis(第三个值 0):定义 flex 项目的初始大小。此处为 0,表示此项目没有初始大小,将根据容器的剩余空间进行分配。

.xypg-left-nav 固定宽度为 310px,不会放大或缩小,而 .xypg-right-content 将根据剩余空间进行调整,既可以放大也可以缩小以适应容器的大小。


上一篇:css3 过度线条

下一篇:已经是最后一篇

文章评论

表情

共 0 条评论,查看全部
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~