新的自己个人学习 0 评论 6 阅读 3 天前举报
display:flex 定义 Flexbox,
横向居中 justify-content:center,
垂直居中 align-items:center,
flex-direction 定义 Flexbox 流 (flow) 的方向 flex-direction: row 横向默认是从左往右反序是 flex-direcition: row-reverse.Flex-direciton:column 纵向默认是从上往下反序是 flex-direction:column-reverse.
Flexbox 偏移是使用 margin 家族的属性(margin-left,margin-right,margin-top,margin-bottom),margin-left:auto 可以获取最大的外边距.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>FlexBox</title>
- <link rel="stylesheet" type="text/CSS" href="Flexbox.css">
- <style>
- *{
- padding: 0;
- margin: 0;
- }
- .menuWrapper{
- background-color: antiquewhite;
- min-height: 2.75rem;
- font-size: 1.25rem;
- padding: 0 1rem;
- display: flex;/* 定义 Flexbox*/
- flex-direction: column;/* 默认值横向 row*/
- justify-content: center;/* 横向居中 */
- align-items: center;/* 垂直居中 */
- }
- @media (min-width: 50em){
- .menuWrapper{
- flex-direction: row;
- }
- }
- .itemsLeft,.itemsRight{
- text-decoration: none;/* 文本样式取消 */
- color: #FF6700;
- }
- @media (min-width: 50em){
- .itemsLeft{
- margin-right: 1rem;
- }
- .itemsRight{
- margin-left: auto;
- }
- }
- </style>
- </head>
- <body>
- <div class="menuWrapper">
- <a href="#" class="itemsLeft">首页</a>
- <a href="#" class="itemsLeft">产品</a>
- <a href="#" class="itemsLeft">学风</a>
- <a href="#" class="itemsLeft">活动</a>
- <a href="#" class="itemsRight">联系</a>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/note/49226/270ce7f37d105c450abccbd7fbdfec5d.html