![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端-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 · 213 阅读 · 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 · 1130 阅读 · 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 · 323 阅读 · 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 · 216 阅读 · 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 · 184 阅读 · 0 评论