微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CSS. 网页基本排版

/* CSS3 Flex<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>
News 1
Today is good day. News 2 News 3
CSS @charset "UTF-8"; body{ background-color: aliceblue } /* CSS Document */ #wrapper{ /*容器*/ flex: none; max-width: 300px;margin: 10px; background-color: #FFCCCC; } nav{ display: flex; } nav>.logo { flex: none;width: 100px; background-color: bisque; } nav>.menu{ flex: auto; background-color:#ccccff; } nav>.user{ flex: none;width: 100px; backgroud-color:#ccffcc; } main { display:flex; justify-content: center; /*水平对齐居中 justify-content: flex 调整位置 flex:start靠左 flex:end靠右*/ align-items:stretch;/*水平垂直对齐 align-items:center 垂直对齐靠中间 align-items:flex-start 垂直对齐靠上方 align-items:flex-end 垂直对齐靠下方 stretch延展 */ background-color: #cccccc; } main>.item /*容器和项目名*/ { flex:none; width:300px;margin:10px; /*flex并排切栏*/ background-color: #ffcccc; }*/

原文地址:https://www.cnblogs.com/xzong/p/14679162.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐