2022-04-04移动web第三天：flex布局

一、移动端视口标签

作用：可以让没有做移动端适配的网页，让该网页能够适应移动端并且完整的展现出来

viewport 是视口
width=deviec-width 这句话的意思是让宽度等于设备宽度
initial-scale=1.0 表示不缩放

二、Flex布局/弹性布局

1、给父元素添加display：flex

子元素就会在一行并列显示，并且不管有多少子元素都会一行显示，还能避免脱标现象

2、组成部分

  弹性容器(父级)：宽度默认为父元素的宽度，高度由内容撑开(在没有宽高的情况下)
  弹性盒子(子级)：

①.宽度由内容撑开，高度默认为父元素的高度(在没有宽高的情况下)
②.弹性盒子没有块、行内、行内块元素之分，都是可以直接设置宽高，一行显示多个
③.弹性盒子默认不换行

3、主轴对齐方式justify-content

作用：可以调节元素在主轴方向的对齐方式，加在父级身上
justify-content: flex-start; 默认值，从起点开始排列
justify-content:flex-end; 从终点开始排列
justify-content:center; 在主轴上居中
justify-content:space-around; 将间距加在弹性盒子两侧
justify-content:space-evenly; 弹性盒子与弹性容器之间的距离相等，并且弹性盒子与弹性盒子之间的距离也相等
justify-content:space-between 空白间距分布在弹性盒子之间，与弹性容器没有间隔

4、侧轴对齐方式align-items

作用：可以调节元素在侧轴方向的对齐方式，加在父级身上
align-items: flex-start; 默认值，从起点开始排列
align-items: flex-end; 从终点开始排列
align-items: center; 在侧轴上居中
align-items: stretch; 默认值，从起点开始排列

align-self: 属性值跟align-items的意思，用来单独控制侧轴上的某个元素的对齐方式

5、伸缩比flex

flex：正整数值; 意思是占用父元素剩余的尺寸，然后分成对应的分数
如果3个子级元素都有添加flex属性，就是将父元素剩余的尺寸，也就是没有元素有固定宽度的尺寸，分成了4等分，第一个div占整个父容器宽度的1/3，第二个div占整个父容器宽度的2/3，第三div占整个父容器宽度的1/3。假如第一个div有固定宽度，第二三个div有flex属性，那么父元素的剩余尺寸就是需要减掉div1的宽度后的尺寸，然后进行分

image.png