前端-Flex布局
关注
分享
扫一扫
EchoByCode
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Flex布局-05-使用flex属性修改弹性盒子伸缩比
1、盒子代码准备：未修改情况：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2022-01-22 20:47:42 · 264 阅读 · 0 评论 -
Flex布局-04-align-items 常用属性值配置
1、align-items 常用属性配置1.1 沿侧轴居中排列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s原创 2022-01-22 20:38:31 · 1198 阅读 · 0 评论 -
Flex布局-03-justify-content常用属性配置
1、justify-content 常用属性值配置：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2022-01-22 20:22:46 · 384 阅读 · 0 评论 -
Flex布局-02-解决浮动脱标问题
1、复现浮动脱标问题：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-01-22 20:17:40 · 246 阅读 · 0 评论 -
Flex布局-01-前置知识
1、什么是Flex布局：Flex布局也称为弹性布局，是一种浏览器提倡的布局模型，布局网页更简单、灵活，同时可以避免浮动脱标的问题。2、设置方式：display: flex：父元素添加,子元素可以自动的挤压或拉伸justify-content：调节元素在主轴的对齐方式align-items：调节元素在侧轴的对齐方式 align-items（添加到弹性容器） align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）3、justify-content 常用属性值：原创 2022-01-22 20:07:45 · 220 阅读 · 0 评论