零基础入门前端 第十三届蓝桥杯省赛 ：水果拼盘 Flex一篇过(可用于备赛蓝桥杯Web应用开发)

第十三届蓝桥杯省赛 水果拼盘/* TODO待补充代码 */ #pond { display: flex; flex-wrap: wrap; flex-direction: column; } /* 以下代码不需要修改 */ .fruit.apple .bg { background-image: url(../images/apple.svg); } .fruit.pear .bg { background-image: url(../images/pear.svg); } .fruit.banana .bg { background-image: url(../images/banana.svg); } #pond { z-index: 20; } #pond, #fruit-background { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 1em; } .lilypad, .fruit { position: relative; width: 20%; height: 20%; overflow: hidden; } .lilypad .bg, .fruit .bg { width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } -webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .lilypad .bg, .fruit .bg { width: 100%; height: 100%; background-position: center center; background-size: 80% 80%; background-repeat: no-repeat; } .fruit .bg { background-size: 30% 30%; } * { box-sizing: border-box; } .lilypad.apple .bg { border-radius: 50%; background-image: url(../images/redplate.svg); opacity: 0.6; } .lilypad.banana .bg { border-radius: 50%; background-image: url(../images/yellowplate.svg); opacity: 0.6; } .lilypad.pear .bg { border-radius: 50%; opacity: 0.6; background-image: url(../images/blueplate.svg); }#pond { display: flex; /* 定义为 Flex 容器 */ flex-wrap: wrap; /* 允许项目换行 */ flex-direction: column; /* 项目垂直排列从上到下 */ }Flex 布局简介FlexFlexible Box弹性盒子是 CSS3 中用于一维布局的强大工具能让容器内的元素自动对齐、分配空间完美适配不同屏幕尺寸。它由Flex 容器父元素和Flex 项目子元素组成。Flex 容器属性父元素设置属性可选值作用displayflex块级容器/inline-flex行内容器定义元素为 Flex 容器子元素自动成为 Flex 项目。flex-directionrow默认水平从左到右/row-reverse水平从右到左/column垂直从上到下/column-reverse垂直从下到上定义 Flex 项目的排列方向。flex-wrapnowrap默认不换行/wrap换行第一行在上/wrap-reverse换行第一行在下定义 Flex 项目是否换行。flex-flowflex-direction和flex-wrap的简写如row wrap同时定义排列方向和换行方式。justify-contentflex-start默认左对齐/flex-end右对齐/center居中/space-between两端对齐项目间间距相等/space-around每个项目两侧间距相等/space-evenly项目间及与容器边缘间距相等定义 Flex 项目在主轴flex-direction定义的方向上的对齐方式。align-itemsstretch默认项目拉伸占满容器高度/flex-start交叉轴起点对齐/flex-end交叉轴终点对齐/center交叉轴居中/baseline项目第一行文字基线对齐定义 Flex 项目在交叉轴与主轴垂直的方向上的对齐方式。align-content同justify-content额外需stretch默认定义多行Flex 项目在交叉轴上的对齐方式仅flex-wrap: wrap时生效。Flex 项目属性子元素设置属性可选值作用order整数默认0定义 Flex 项目的排列顺序数值越小越靠前。flex-grow非负整数默认0定义 Flex 项目的放大比例0表示不放大数值越大放大越多。flex-shrink非负整数默认1定义 Flex 项目的缩小比例0表示不缩小数值越大缩小越多。flex-basis长度值如200px/auto默认定义 Flex 项目在分配空间前的初始大小。flexflex-grow flex-shrink flex-basis的简写如1 1 auto默认/none0 0 auto同时定义放大、缩小和初始大小推荐使用简写。align-selfauto默认继承父元素align-items/ 同align-items其他值单独定义单个 Flex 项目在交叉轴上的对齐方式覆盖父元素align-items。