欢迎光临
我们一直在努力

css如何实现Flex布局

这篇文章主要介绍css如何实现Flex布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

Flex布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
 display: flex;
}
.left {
 width: 300px
 height: 100px;
 background-color: red;
}
.center {
 flex:1;
 height: 100px;
 background-color: black;
}
.right {
 width: 300px;
 height: 100px;
 background-color: blue;
}
</style>
</head>
<body>
<div class="father">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>
</body>
</html>

以上是“css如何实现Flex布局”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注云搜网行业资讯频道!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。