11 flex弹性布局（pc端兼容性差，用传统布局） Grid网格布局

1.布局原理：

父盒子设置为flex布局后，子元素的 float ，clear ，vertical-align属性将失效

2.父盒子嵌套子盒子：

采用flex布局的元素称为flex容器（flex container）所有子元素成为flex项目（flex item）排列方式：flex-direction:row/column

3.常见父项属性：display:flex;

flex-direction:row从左到右 | row-reverse 从右向左 / column | column-reverse;设置主轴方向

justify-content:flex-start | flex-end | center  | space-around平分距离 | space-between先两边贴边，在平分 ;设置主轴上子元素排列方式

flex-wrap:wrap| no-wrap | wrap-reverse(换行，两行颠倒上下顺序 )默认不换行；设置子元素是否换行，如果一行装不开，会缩小盒子的宽度。

align-content:flex-start  |  flex-end  | space-around |  space-between | center |stretch（设置子项元素高度平分父元素高度）一定得先设置了flex-wrap:wrap;换行设置侧轴上子元素的排列方式（多行）在单行情况下没有效

align-items:stretch拉伸默认值(子元素必须没有高度) | center | flex-start | flex-end ;设置侧轴上子元素排列方式（单行）

flex-flow：column wrap;复合属性，相当于同时设置了flex-direction和flex-wrap

4.常见布局子项属性

1.  flex子项目占的份数（定义子项目分配剩余空间，用flex来表示占多少份）

2.align-self 控制子项自己在侧轴上的排列方式（控制某个单个盒子）

3.order 属性定义子项的排列顺序（前后顺序）二号盒子 {order:-1}数值越小，越靠前，默认是0

左右侧固定，中间自适应：父盒子display：flex；三个子盒子，左右设置宽高，中间盒子设置flex:1;

平分子盒子：子盒子不设置宽度，然后flex:1;各占一份；

技术选型：单独制作页面  技术：布局采取flex布局

常见应用：

1.一个盒子内平均5份：父盒子display:flex;子盒子：flex:1;

2.一个盒子内上下水平居中：

默认主轴是x轴，display：flex；flex-direction：column；把侧轴对齐方式设置为居中对齐align-items:center;

3.一个父盒子里面10个孩子，分上下两行显示：

父盒子display:flex; 排不下了换行flex-direction：wrap；关键点：这时候10个孩子还是在一行上显示；flex份数可以是百分比，是父盒子的百分之多少，只要子盒子是父盒子的20%，那么一行就只有5个孩子，这样就会两行显示；子盒子代码：flex：20%；

5.Grid 网格布局：

CSS Grid 布局完全指南(图解 Grid 详细教程)CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grihttps://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649089984&idx=1&sn=ba9719bc4b1b7805c36f42470ab07cb2&chksm=be5bc06d892c497b57b26594f799131f75d0f5f949d0b5e620239aa7513fd143dd165a4ccc30&scene=27