Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 演示flex container 容器中的4个属性
Blogger Information
Blog 22
fans 0
comment 0
visits 15627
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
演示flex container 容器中的4个属性
杰西卡妈妈
Original
535 people have browsed it

1.实列flex项目上的三个属性

  • flex-grow 项目允许放大
  • flex-shrink 收缩
  • flex-basis 设置项目在主轴上的大小，它优先于项目本身的设置
    1.   flex-grow: 1;
    2.   flex-shrink: 0;
    3.   flex-basis: auto;
    或者
    1.   flex: 1 0 auto;
    还可以默认
    1.   flex: initial;

代码区

效果:

  • flex-shrink 收缩
  • flex-basis 设置项目在主轴上的大小，它优先于项目本身的设置
  • order
    DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目上的flex属性</title>
    <style>
    1. * {
    2.   box-sizing: border-box;
    3. }
    4. :root {
    5.   font-size: 10px;
    6. }
    7. body {
    8.   font-size: 1.6rem;
    9. }
    10. .container {
    11.   display: flex;
    12.   height: 20rem;
    13.   border: 1px solid #000;
    14. }
    15. .container > .item {
    16.   width: 10rem;
    17.   background-color: lightcyan;
    18.   border: 1px solid #000;
    19.   order: 0;
    20. }
    21. .item.one {
    22.   background-color: #fff;
    23.   order: 90;
    24. }
    25. .item.two {
    26.   background-color: #ff7;
    27. }
    28. item.three {
    29.   background-color: #9f7;
    30. }
    31. .item.four {
    32.   background-color: #897;
    33. }
    </style>
    </head>
    <body>
    <div class="container">
    1. <div class="item one">item1</div>
    2. <div class="item two">item2</div>
    3. <div class="item three three">item3</div>
    4. <div class="item four">item4</div>
    </div>
    </body>
    </html>

2.移动商城首页的页眉和页脚的布局

  • 先写index.html, 写上3个div class: header,main and footer, 链接index.css, reset.css
  • 在css里面布局，保险一点最好在header and footer后面加上z-index.

    代码html

    <link rel="stylesheet" href="static/css/index.css" <div class="header">header</div>
    <div class="main">main</div>
    <div class="footer">footer</div>

    代码index.css

    @import “reset.css”
    .header {
    background: red
    color: white
    height: 4.4rem
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index.100
    }
    .main {
    position: absolute;
    top: 4.4rem,
    left: 0;
    right: 0;
    bottom: 4.4rem;
    }
    .footer {
    background: grey;
    color: white;
    height: 4.4rem;
    position: fixed;
    left, bottom and right all are 0;
    z-size.100
    }

    代码reset.css

  • {
    margin: 0;
    padding:0;
    box-sizing: border-box;
    }
    li {
    list-style: none;
    }
    a {
    text-decoration: none;
    color: grey;
    }
    body {
    background-color: #f6f6f6;
    }
    html {
    font-size: 10px;
    }
    body {
    font-size: 1.6rem;
    }
    @media screen and (min-width: 480px) {
    html {
    font-size: 12px;
    }
    }

@media screen and (min-width: 640pz) {
html {
font-size: 14px;
}
}

@media screen and (min-width: 720pz) {
html {
font-size: 16px;
}
}

效果

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post