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; }*/

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...