51CTO阿理flex布局基础教程+项目实战(仿美团外卖H5移动端首页布局)2022年更新

网盘目录

01 flex布局课程内容介绍
01 flex布局课程介绍.mp49.9 mb
02 初识flex布局及基本概念
01 初识flex布局及基本概念.mp411.79 mb
03 flex布局容器的六大属性
01 flex容器六大属性之一flex-direction属性.mp47.5 mb
02 flex容器六大属性之二flex-wrap属性.mp41.91 mb
03 flex容器六大属性之三flex-flow.mp4946.06 kb
04 flex容器六大属性之四justify-content属性.mp46.38 mb
05 flex容器六大属性之五align-items属性.mp47.7 mb
06 flex容器六大属性之六align-content属性.mp45.33 mb
04 flex布局项目的六大属性
01 flex项目六大属性之一order属性.mp42.35 mb
02 flex项目六大属性之二flex-grow属性.mp42.42 mb
03 flex项目六大属性之三flex-shrink属性.mp42.53 mb
04 flex项目六大属性之四flex-basis属性.mp42.44 mb
05 flex项目六大属性之五flex属性.mp43.46 mb
06 flex项目六大属性之六align-self属性.mp42.19 mb
07 flex布局基本知识点总结.mp41.98 mb
05 用flex布局实现骰子6个面的形状
01 用flex布局实现骰子6个面的形状一.mp43.76 mb
02 用flex布局实现骰子6个面的形状二.mp44.74 mb
03 用flex布局实现骰子6个面的形状三.mp43.88 mb
04 用flex布局实现骰子6个面的形状四.mp46.13 mb
05 用flex布局实现骰子6个面的形状五.mp45.04 mb
06 用flex布局实现骰子6个面的形状六.mp45.13 mb
06 flex布局项目实战(仿美团外卖移动端首页)
01 项目实战-美团外卖-前期准备工作.mp416.34 mb
02 项目实战-美团外卖-项目结构以及相关文件说明.mp416.84 mb
03 项目实战-美团外卖-完成当前位置.mp423.67 mb
04 项目实战-美团外卖-实现搜索区域.mp442.78 mb
05 项目实战-美团外卖-完成导航.mp431.7 mb
06 项目实战-美团外卖-滚动图片及筛选.mp440.83 mb
07 项目实战-美团外卖-商家列表基本结构.mp411.16 mb
08 项目实战-美团外卖-商家名称和销售信息.mp448.94 mb
09 项目实战-美团外卖-配送和点评信息.mp440.14 mb
10 项目实战-美团外卖-商家折扣信息.mp439.98 mb
11 项目实战-美团外卖-底部导航.mp422.72 mb
12 项目实战-美团外卖-css兼容各浏览器处理.mp422.36 mb
免费试看
阿理

适合人群:

有一定的html5+css3基础,想要学习flex布局,熟练进行响应式网页开发

你将会学到:

掌握flex布局的基本原理,熟练使用flex布局来完成页面布局

课程简介:

Flex 是 Flexible Box 的缩写,意为”弹性布局”,是W3C 提出的一种新型布局方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。



顾名思义,弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式,如float、position,根据盒子模型,就可以计算出元素的展示尺寸(长宽非百分比),除非溢出,否则不依赖于父容器的大小。而弹性布局中元素的大小是高度依赖父容器的大小的。因为,它所具有的“伸缩性”,目标就是为了撑满父元素。当然也可以通过相关css属性控制其是否撑满、撑满什么轴。



一、基本知识点学习


采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”



Flex 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。项目默认沿主轴排列,当然项目的排列方向也可以通过改变属性来控制。



主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。



二、学习容器属性



以下六个属性设置在容器上



    flex-direction         决定主轴的方向(即项目的排列方向)

    flex-wrap               项目是否换行及换行方向

    flex-flow                flex-direction属性和flex-wrap属性的简写形式

    justify-content       定义了项目在主轴上的对齐方式

    align-items            定义了项目在交叉轴上的对齐方式

    align-content         定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用



三、学习项目属性



以下六个属性设置在项目上



    order       定义项目的排列顺序。数值越小,排列越靠前,默认为0

    flex-grow    定义项目的放大比例,默认为0,即不放大

    flex-shrink   定义项目的缩放比例,默认为0,即不缩放

    flex -basis   定义了在分配多余空间之前,项目占据的主轴空间

    flex        flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto

    align-self   允许单个项目有与其他项目不一样的对齐方式


四、通过筛子的6个面的形状来练习flex布局的基本用法

五、项目实战(仿美团外卖移动端首页)

全网最全最新最专业的资源站
九章资源站 » 51CTO阿理flex布局基础教程+项目实战(仿美团外卖H5移动端首页布局)2022年更新

发表回复

全网最全最新最专业的资源站

购买会员 联系客服