flex与inline-flex丨技术开发分享录

flex与inline-flex

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"flex、inline-flex同block、inline-block类似,一个是块级,一个是行内块级\n\n**1、display: flex**\n\n<style type=\"text/css\">\n\t.list{display:flex;height:60px}\n\t.item{flex:1;text-align:center;line-height:60px;font-size:22px;color:#fff}\n\t.item:nth-of-type(1){background-color:#67c23a}\n\t.item:nth-of-type(2){background-color:#e6a23c}\n\t.item:nth-of-type(3){background-color:#f56c6c}\n</style>\n<div class=\"list zh-mt-10\">\n\t<div class=\"item\">1</div>\n\t<div class=\"item\">2</div>\n\t<div class=\"item\">3</div>\n</div>\n\n```markup\n<style type=\"text/css\">\n\t.list{display:flex;height:60px}\n\t.item{flex:1;text-align:center;line-height:60px;font-size:22px;color:#fff}\n\t.item:nth-of-type(1){background-color:#67c23a}\n\t.item:nth-of-type(2){background-color:#e6a23c}\n\t.item:nth-of-type(3){background-color:#f56c6c}\n</style>\n<div class=\"list\">\n\t<div class=\"item\">1</div>\n\t<div class=\"item\">2</div>\n\t<div class=\"item\">3</div>\n</div>\n```\n\n**2、display: inline-flex**\n\n<style type=\"text/css\">\n\t.list-1{display:inline-flex;width: 200px;height:60px;}\n\t.item-1{flex:1;text-align:center;line-height:60px;font-size:22px;color:#fff}\n\t.item-1:nth-of-type(1){background-color:#67c23a}\n\t.item-1:nth-of-type(2){background-color:#e6a23c}\n\t.item-1:nth-of-type(3){background-color:#f56c6c}\n</style>\n<div class=\"list-1 zh-mt-10\">\n\t<div class=\"item-1\">1</div>\n\t<div class=\"item-1\">2</div>\n\t<div class=\"item-1\">3</div>\n</div>\n\n```markup\n<style type=\"text/css\">\n\t.list-1{display:inline-flex;width: 200px;height:60px;}\n\t.item-1{flex:1;text-align:center;line-height:60px;font-size:22px;color:#fff}\n\t.item-1:nth-of-type(1){background-color:#67c23a}\n\t.item-1:nth-of-type(2){background-color:#e6a23c}\n\t.item-1:nth-of-type(3){background-color:#f56c6c}\n</style>\n<div class=\"list-1\">\n\t<div class=\"item-1\">1</div>\n\t<div class=\"item-1\">2</div>\n\t<div class=\"item-1\">3</div>\n</div>\n```\n\n"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看