📦 归档笔记 — 原创建于 WizNote,仅作归档展示;观点以当年为准,非最新。

flex实现分隔线效果

创建时间2019-10-29最后修改2019-10-29原位置/程序员成长之旅/HTML+css网页学习/字数64图片/附件1
目录:程序员成长之旅/HTML+css网页学习

.box {

height: 40px;

width: 300px;

background-color: wheat;

display: flex;

justify-content: space-between;

align-items: center;

}

.line {

height: 2px;

flex-grow: 1;

background-color: red;

}

🖼 图片占位(归档模式)图片见原始导出:https://imgsa.baidu.com/exp/w=500/sign=843dc7ab01d162d985ee621c21dea950/8644ebf81a4c510f5fcc6b756b59252dd42aa551.jpg