web前端笔记11.23

弹性盒子

ul{
   display:flex;
更改主轴方向
   flex-direction:row/row-reverse/column/column-reverse
主轴排列方向
   justify-content:center;主轴居中
                   space-between;两边贴边，中间平分剩余空间
                   flex-start;靠开始
                   flex-end;靠结束
                   space-around;平分剩下的空间
交叉轴的对齐方式
   align-items:center;
         只能控制一行
   align-content:center;
         多行


自动换行
   flex-wrap:wrap;
 

   order:-2;越小越靠前

   
   flex-grow:1;平分剩余空间  1:1
   flex-shrink:0;不被压缩
   align-self:flex-end;只有自身动

grid布局

display:grid 占满
grid-template-columns:100px 200px;竖直占满，水平宽度
                      100px 200px 200px
                      1fr
                      1fr 2fr 1fr
                      1fr 2fr 1fr 1fr
grid-template-rows:200px
                   1fr 2fr 1fr
                   repeat(4,100px)
row-gap:20px竖直方向上的间距
column-gap:20px;水平方向上的距离
连写 gap:20px 竖直水平


.box{
 竖直跨
     grid-row-start:2;
     grid-roe-end:4;
   连写 grid-row:2/4
 水平跨
     grid-column-start:
     grid-column-end:
   连写 grid-column:../..



min-width:300px; 最小宽度
max-width:700px; 最大宽度



grid-template-areas:
     “header header header header”
     “aside . main main”
header{
       grid-area:header;
      }