Flex布局笔记
关注
分享
扫一扫
文章平均质量分 58
Flex布局笔记
JHY97
这个作者很懒，什么都没留下…
展开
-
Flex布局练习（四）- rem弹性布局
一、rem弹性布局1.1 布局特点为了保证在各种屏幕上不失真，就要根据实际屏幕宽度做等比例换算1.2 代码案例.index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp原创 2022-01-29 22:43:07 · 499 阅读 · 0 评论 -
Flex布局练习（三） - 响应式布局
一、响应式布局1.1 布局特点确保一个页面在所有的终端上，都能显示出令人满意的效果1.2 设计思路使用%或rem作为单位1.3 代码案例layout-1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &原创 2022-01-28 23:06:05 · 432 阅读 · 0 评论 -
Flex布局案例练习（二）- 自适应布局
Flex布局简单案例练习一、自适应布局不同的设备用不同的页面或局部伸缩设计思路：判断设备的类型或控制局部的变化原创 2022-01-25 23:57:54 · 1613 阅读 · 0 评论 -
Flex布局案例练习（一）
练习flex布局，以输入框为例1.代码原创 2022-01-24 22:25:54 · 535 阅读 · 0 评论 -
Flex布局 - 仿携程网移动端首页案列练习
一、搭建相关文件结构1.1 文件结构创建相关存储文件夹以及搭建index.html文件结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de.原创 2022-01-10 01:10:16 · 1809 阅读 · 0 评论 -
Flex布局常见子项属性
1.flex属性flex属性定义子项分配剩余的空间，用flex表示占据多数分数1.1案例一 父项内两边子项固定宽度，中间子项宽度可自适应浏览器屏幕宽度变化<body> <section> <div></div> <div></div> <div></div> </section></body><st原创 2022-01-06 22:53:04 · 2119 阅读 · 0 评论 -
Flex布局常见父项属性（三）- align-items, align-content和flex-flow
1.align-items用于设置侧轴上的子元素排列方式（单行）该属性用于控制子元素在侧轴（默认为y轴）上的排列方式，在子元素为单项时使用1.1属性值属性值 说明 flex-start 从上到下；默认值 flex-end 从下到上 center 垂直居中 stretch 拉伸 1.2案例1.设置align-items属性值：center为了能够更好区别，先设置主轴（x轴）居中，再设置侧轴（y轴）居中 /* 父级原创 2022-01-06 00:06:43 · 25678 阅读 · 1 评论 -
Flex布局常见父项属性（二）- justify-content和flex-wrap
1. justify-content用于设置主轴上的子元素排列方式justify-content属性定义了项目在主轴上的对其方式（使用前必须确定主轴是x轴还是y轴）1.1. 属性值justify-content属性值 属性值 说明 flex-start 从头部开始（如果主轴是x轴，从左到右）；默认值 flex-end 从尾部开始排序 center 在主轴居中对齐（如果主轴是x轴，则水平居中） space-around 平分剩余空间 space-原创 2022-01-05 22:21:55 · 5156 阅读 · 0 评论 -
Flex布局常见父项属性（一）- flex-direction
一、flex-direction用于设置主轴的方向1.主轴和侧轴在flex布局中分为主轴和侧轴两个方向，也可称为 行和列、x轴和y轴其中默认主轴方向为x轴，水平向右 默认侧轴方向为y轴，水平向下2.属性值flex-direction属性值用于决定主轴的方向flex-direction 属性值 说明 row 从左到右，默认值 row-reverse 从右到左 column 从上到下 column-reverse 从下到上 3.案例原创 2022-01-04 23:53:17 · 17337 阅读 · 0 评论