flex布局

Flex 布局语法教程 | 超详细 一个例子

.container {
     display: flex;
     flex-direction: row|column-reverse|column|column-reverse;
     flex-wrap: nowrap | wrap | wrap-reverse;;
     justify-content: flex-start | flex-end | center | space-between | space-around;
     align-items: flex-start | flex-end | center | baseline | stretch;;
     align-content: 
     flex-start | flex-end | center | space-between | space-around | stretch;
   }
.item {
     flex: 1 1 auto;
     margin: 14px;
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }

flex布局总结

确定主轴方向图解

对齐方式图解

grid布局

网格 - 学习 Web 开发 | MDN (mozilla.org) grid图示

注意底下的 [1][2][3][4][5][6]--是列线，对应column，可以指定列区域

[1][2][3][4]--------是行线，对应row，指定行区域

grid布局小总结

生成网格

.parent {  
display: grid;  

grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;

grid-template-columns: repeat(5, 1fr);  
grid-template-rows: repeat(5, 1fr);  

auto-fill：自动生成几列，minmax(200px, 1fr) 最小200px,最大1fr，由视图决定
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(100px, auto);

grid-column-gap: 0px;  
grid-row-gap: 0px;  
}

放置元素

.div1 { grid-area: 1 / 1 / 2 / 6; }  
等价于
.div1{
        grid-row: 1/2;
        grid-column: 1/6;
      }
.div2 { grid-area: 2 / 1 / 4 / 6; }  
等价于
.div2{
        grid-row: 2/4;
        grid-column: 1/6;
      }
.div3 { grid-area: 4 / 1 / 6 / 3; }   4 /6   1 /3
.div4 { grid-area: 4 / 3 / 6 / 5; }   4 /6  3 /5

第二种放置元素的方式

    .item-a {grid-area: header;}
      .item-b {grid-area: main;}
      .item-c {grid-area: sidebar; }
      .item-d {grid-area: footer;}  
      
      .container {
        width: 300px;
        height: 200px;
        
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        
        grid-template-areas:
          "header header header header"
          "main main . sidebar"
          "footer footer footer footer";
      }

多行布局 multi-column-layout

.container {
  column-count: 3;---列的数目
  column-gap: 20px;---列间距
  column-rule: 4px dotted rgb(79, 185, 227);--分割线
  column-fill:auto;--分布方式
}

折行

.card {
  break-inside: avoid;
  page-break-in；side: avoid;
    column-span：all;--占据全部位置
}

position 定位:static relative, absolute, fixed sticky

怪异盒模型

开启 它的width和height包含padding和border部分，这样方便布局

开启 
box-sizing: border-box;