前端移动web-day02学习笔记

01-flex伸缩布局

1.伸缩(弹性)布局的作用：

给父盒子加buff，让功能更加强大

2.伸缩布局的应用场景：多列布局

a.以前的方案：浮动+百分比 实现

弊端：不能实现所有的情况(3列 7列 9列)

b.伸缩布局：浮动+百分比搞不定的多咧布局

3.伸缩布局的使用流程：

设置“父元素”的 display：flex;

4.伸缩布局的三要素（原理）:

a.主轴(main axis.默认从左往右)：元素 水平方向排列方式

特点：子元素的宽度如果超出父元素：子元素不会超出，伸缩盒子会进行合理分配

b.次轴(cross axis.默认从上往下)：元素 垂直方向排列方式

次轴永远和主轴是垂直的

特点：子元素总高度大于父元素的高度：子元素会超出

c.内容(item)：子元素

5.伸缩布局的特点（属性）

以下是给父元素设置的属性：

1.flex-direction 属性决定主次轴的方向 （不常用）

默认为row：水平从左往右

row-reverse：从右往左

column：从上往下

column-reverse：从下往上

图解：

flex-direction

2.justify-content：flex-主轴方向排列对齐方式（常用）

flex-start 左对齐

flex-end 右对齐

center: 水平居中

space-around 间距相等

space-between 两端对齐，元素之间间隔相等

3.align-items:flex-次轴排列方式(常用)

flex-start:从次轴起始方向对齐，默认顶部

flex-end:从次轴结束方向对齐，默认底部

center：中心对其

stetch：如果元素没有给高度那么将铺满父盒子高度

4.flex-wrap:主轴换行方式(常用)

1.默认为nowrap

2.wrap：允许换行（常用）

3.wrap-reverse:反向换行(不常用)

5.align-content:flex-多行排列方式， 如果flex-wrap为不允许换行，则该属性无效(不常用)

默认为stretch：轴线占满整个交叉轴

flex-start:与交叉轴起点对齐

flex-end:与交叉轴的重点对齐

center：与交叉轴中点对齐

space-between:两端对齐，中间间隔平均分

space-around：间距相等

以下是给子元素设置的属性：

注意：flex的优先级高于width

最后附上思维导图：

下午用伸缩布局写了一个首页案例