移动web第四天

flex布局（重要）！！！！

移动端和PC端区别

PC端

1.定版心

2.页面中的元素宽高几乎都是px单位！！定死大小

移动端

1.不会定版心

2.元素的大小很少使用px单位都会用相对长度单位（百分比单位热门 vw vh未学）屏幕越大元素越大

早期的移动端布局

百分比布局也叫流式布局（宽度自适应，高度固定）

弊端：不够方便一旦增加元素对应的width代码需要重新计算

主流的移动端布局

flex布局好用方便简单

flex布局也称弹性布局使用及变化（重要！！！！）

使用

设置父元素变成flex盒子弹性布局

display：flex

使用后的变化

设置了flex的盒子称之为父项

flex盒子里面的资源数称之为子项

子元素（子项）具体变化

1不再区分块级行内行内块全部都可以设置宽度和高度

2子项默认的宽度由内容撑开高度等于父项的高度

3子项

使用浮动无效

使用定位,margin,transform都有效

4.默认情况下子项的总宽度大于父项的宽度也不会换行，只会压缩自身的宽度。

对齐方式--justify-content

flex布局存在主轴侧轴（类似 excel）

1 主轴 = x轴 = 水平方向默认主轴 x轴

给父项添加的父项中设置主轴对齐方式

1 左对齐 flex-start

2 右对齐 flex-end

3 居中对齐 center

4 先两侧对齐，间隔存放 space-between; 快捷写法sb

5 间隔存放 - 两侧空间小于中间 space-around; 快捷写法sd

6 绝对平均 space-evenly; 快捷写法sv

2 侧轴 = y轴 = 垂直方向

1.单行对齐

align-items: center;

flex-start 上对齐

flex-end 下对齐

center 居中

2.多行对齐

align-content: flex-start;

flex-start 上对齐

flex-end 下对齐

center 居中对齐

space-between 上下对齐中间平分空间

space-around 间隔上下两侧小于中间

space-evenly 绝对平分

设置主轴方向

flex-direction：row;

row 默认值从左到右

row-revese 从右到左

column（常用）从上到下

column-revese 从下到上

flex换行（默认不换行只会压缩子项宽度）

flex-wrap: wrap;

nowrap 不换行默认值

wrap 换行

子项设置

1.设置子项占父项宽度（高度）的比例 flex

flex:1

2.设置子项自己在侧轴上的对齐方式

align-self：flex-start

flex-end

center

主轴方向row默认值情况下默认的宽度由内容撑开高度等于父项高度

主轴方向column情况下默认的高度由内容撑开宽度等于父项宽度

flex布局