<!DOCTYPE html> <head> <meta charset=> <style type=> 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 链接:http://caibaojian.com/flexbox-example.html 来源:http://caibaojian.com body { display: -webkit-flex; display: flex; flex-flow: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; height: 100%; background: lightgrey; } .content { display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; -webkit-justify-content: center; justify-content: center; text-align: center; width: 250px; height: 250px; padding: 7px; background: yellow; } </style> </head> <body> <form> <body> <div > <p>It is extremely difficult to vertically align content using traditional CSS without knowing exactly where you want the item to appear. </p> </div> </body> </form> </body> </html>
博客帖子的典型页面布局
<!DOCTYPE html>
<head>
<meta charset=>
<style type=>
.post {
display: flex;
flex-flow: column wrap;
}
.post-meta {
display: flex;
flex-flow: row wrap;
order: 1;
}
.post-body {
order: 3;
}
.post-comments {
order: 4;
}
.comments-count {
margin-left: auto;
}
.post-image {
order: 2;
align-self: center;
}
</style>
</head>
<body>
<div >
<h1>This is my first blog post</h1>
<div >
<div >Alex Cheng</div>
<div >2014-07-02 10:10 am</div>
<div >2 comments</div>
</div>
<div >
My first blog post.
</div>
<div >
<img src=>
</div>
<div >
<h3>Comments</h3>
<ul>
<li><div >Bob</div><div>This is a good post.</div></li>
<li><div >David</div><div>Good post.</div></li>
</ul>
</div>
</div>
</body>
</html>
2017-08-23 23:25:48
标签：
原文：
技术交流学习或者有任何问题欢迎加群
编程技术交流群 : 154514123
Java技术交流群 : 6128790
广告推荐
讨论区
相关文章
精彩导读
热门资讯
关注我们
