弹性盒子 flex

flex 主要API

父元素 container

1. display:flex |inline-flex; 开启弹性布局
2. flex-direction: row | row-reverse | column | column-reverse ; 可以改变排列方向
3. justify-content:flex-start | flex-end | space-between | space-around | space-evenly;设置子元素在主轴的排列方式
4. align-items align-items:flex-start | flex-end | center; 设置子元素在侧轴轴的排列方式
5. flex-wrap:no-wrap | wrap | wrap-reverse; 换行
6. align-content: flex-start | flex-end | center | space-between | space-around | stretch;当子元素多行排列时,设置侧轴排列方式

子元素 items

1. flex-grup:1; 设置子元素占比
2. flex-basis:300px ;覆盖父级或本身的width属性 (优先级小于min-width和max-width)
3. flex-shrink：2;当值大于1的时候为元素缩小 小于1是为放大
4. flex:flex-grup flex-shrink flex-basis 属性的缩写
5. flex：flex-grup flex-shrink flex-basis;

/*如果是只写一个值代表 flex-grup*/
  flex:1;

/*如果写两个值代表 flex-grup flex-shrink*/
flex:1 2;

/*两个值也可以代表 flex-grup flex-basis*/
flex:1 200px;

 /*三个值代表 flex-grup flex-shrink flex-basis*/
flex:1 2 200px;

grid 布局

  看到过许多grid文章 昨天通过学习 练习确实grid布局非常快而且方便 为了方便使用时查api 对主要api做了汇总

gird 主要 api 内容

1. 父元素 container

1. display：grid; //创建容器
2. grid-template-columns:100px 100px 100px; // 设置列宽
3. grid-template-rows:50px 100px; // 设置行高
4. row-gap:10px; // 设置行间距
5. columns-gap:10px; // 设置列间距
6. gap:row-gap columns-gap; 缩写
7. justify-content: start | end | center | stretch | space-around | space-between | space-evenly; // 设置整体内容水平排列方式
8. align-content: start | end | center | stretch | space-around | space-between | space-evenly;//设置整体内容垂直排列方式
9. place-content: space-around space-evenly; 缩写
10. justify-items: start | end | center | stretch; //设置每个单元格水平方向排列方式
11. align-items:center; // 设置每个单元格垂直排列方式
12. place-items: align-items justify-items; 缩写
13. grid-auto-flow: row; 排列方式 默认先行后列 column 先列后行
14. grid-template-areas:'a b c ' 'd e f'// 设置网格区域 .代表不需要利用

2. 子元素 items

1. justify-self: start | end | center | stretch; // 水平
2. align-self: start | end | center | stretch; // 垂直
3. grid-column-start:1; // 设置开始网格线
4. grid-column-end: 2;// 终止网格线
5. grid-column:grid-column-start / grid-column-end;
6. grid-row-start:1; // 开始网格线
7. grid-row-end: 3;// 终止网格线
8. grid-row:grid-row-start / grid-row-end;
9. grid-area:a; // 子元素占取的区域

关键字

1. auto 呈现自适应宽度
2. fr 比例单位
3. auto-fill 动态填充个数(行或列)
4. minmax（10px,30px） 设置最小最大宽度