CSS-flex|gird 布局

网页布局.css

*{
    box-sizing: border-box;
}
/* flex弹性布局 */
#flex-container {
    display: flex;
    flex-direction: row;
    border: 3px solid red;
  }
  
#flex-container > .flex-item {
    flex: auto;
    border: 1px solid green;
}

#flex-container > .raw-item {
    width: 5rem;
}


/* https://developer.mozilla.org/zh-CN/docs/Glossary/Grid */
/* grid网格布局 */
.wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div{
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

/* 媒体查询 */
/* https://www.w3cschool.cn/css3/css3-mediaqueries.html */
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media */
@media screen and (min-width: 480px) {
    /* 屏幕尺寸小480px时背景色变化 */
    body {
        background-color: lightgreen;
    }
}

html文件

    
    
    
    


    
    

        
Flex box (click to toggle raw box)
        
Raw box
    

    
    

        
One
        
Two
        
Three
        
Four
        
Five
        
Six
        
Seven
        
Eight