【CSS】弹性布局 flex

已于 2022-05-17 20:57:27 修改
阅读量406 收藏
点赞数
文章标签： css css3 html 前端 html5
于 2022-04-27 20:41:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50947589/article/details/124460071
版权
本文详细介绍了CSS中的flex布局，包括`display: flex`和`inline-flex`的区别，以及父级和子级的相关属性，如`flex-direction`、`justify-content`和`align-items`等，帮助开发者掌握弹性布局的使用技巧。
摘要由CSDN通过智能技术生成

标签属性

display: flex;/* 父级占满全屏 */

display: inline-flex;/* 父级大小由子级内容撑开，符合行块内容的特性 */

最适合小规模布局，大规模布局用网格。

在子级写宽高可能无法应用，子级的大小取决于父级。

写在父级的属性：

flex-direction，flex-wrap，flex-flow，justify-content，align-items，

align-content

flex-direction: row ;

作用：用来检索子级的排列方式

写在父级中，和子级中的float作用相似

row:（默认值）横向排列，第一个到最后一个从左到右排列。<

最低0.47元/天 解锁文章
贺情
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS弹性布局 Flex属性
weixin_48661004的博客
12-13 1642
CSS弹性布局 Flex属性 自适应布局 flex属性
flex 底部固定_详解八种方法实现CSS页面底部固定
weixin_39601743的博客
12-22 3318
当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位htmlHeaderContentFooterCSS.dui-container{position: relative;min-height: 100%;}main {padding-bottom...
flex弹性盒子布局
weixin_55788590的博客
04-14 570
让我们直接进入主题,设置弹性盒子布局的方式: .container { display: flex; } <div class="container"></div> 现在已经获得了一个flex容器, 在容器中加入一些flex项,修改一下样式，让它们更加醒目: .container { display: flex; background: #00008B; } .container div { width: 100px; h
帧动画-红绿灯
m0_65480869的博客
08-15 176
html帧动画实现红绿灯
deplay：flex 将元素定位到最底部
catherine的博客
12-26 1万+
//父元素 .a{ min-height: 100%; display: flex; flex-direction: column; } //子元素1 .b{ -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } //子元素2 .c{ flex: 1 0 auto; display...
Flexbox如何将页面底部固定在屏幕最下方
热门推荐
u010378313的博客
04-23 1万+
原文：Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时，有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白。 本文将介绍一种现代化的方法，确保 footer 始终处于页面的底部。 解决方法 解决该问题的最好方法是采用 flexbox——C
CSS 弹性布局 flex 二
卋舉
10-13 118
居中等分 justify-content:center; 居中对齐(项目 itmes) align-items:center; 布局方向(方向 direction; 行 row; 列 lcoumn) flex-direction:lcoumn; <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
CSS-flex弹性布局
yen_zz的博客
04-12 478
1.认识flex Flex的发展史 2009年W3C 提出概念，但是官方没有flex这个词 2011年浏览器厂商决定使用flexbox，来形容它的布局特点 2015年W3C正式将其修改为flexbox布局 2016年5月官方正式公布最新的稳定的flex布局规范标准，各大浏览器的支持越来越稳定 定义 Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 作用 它能够更加高效方便的控制元素的对齐、排列 可以自动计算布局内元素的尺寸，无论这个元素的尺寸
css flex 弹性布局详解
09-24
CSS Flex（弹性布局）是一种强大的布局模式，特别适用于创建响应式设计，因为它允许开发者更灵活地控制元素在容器中的对齐方式和排列顺序。在本文中，我们将深入探讨Flex布局的关键概念，包括基本用法、父容器属性...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
CSS的flex布局.ppt
06-12
网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一...
css弹性盒子（flex）管理系统布局
11-20
因为经常做后台管理系统，时不时都要去下一些框架，然而有时候仅仅只是需要一个页面框架布局，却需要引入一大堆文件，于是，自己用css弹性盒子（flex）简单做了一个管理系统布局，代码简单，下载即用。不是说人家...
display:flex 均等排列 一行排两列或者多列，最后的元素靠左对齐
夜阑珊妖妖
10-15 1万+
display:flex flex-direction属性决定主轴的方向（即项目的排列方向）。 flex-direction: row | row-reverse | column | column-reverse; row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴...
flex布局之固定的底栏
Y00010010的博客
03-24 1738
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。这里有个“视口高度”的单位vh。“视口”是什么，其实也很好理解，在PC端，视口是指浏览器的可视区域，那视口高度的单位vh是怎么回事呢？其实也难理解。只要记住1vh=视口高度的1%。更简单的描述是，假如你的浏览器可视高度为1000px，那么1vh = 1000px / 100 =...
利用flex让页脚自适应置底显示
振飞⁶⁶⁶₆₆₆666
07-18 631
昨天帮朋友写个简单的页面，由于没有传后台数据所以页面写完主体部分很短，是的footer页脚没有显示在视窗的底部。 最后用flex的拉伸性解决了。 看一下css代码 html, body { margin: 0; padding: 0; } html { height: 100%; } body { font-family: 'Oswald', sans...
配置环境变量
qq_45685099的博客
10-14 446
配置环境变量 找到java文件夹 复制地址，让后打开高级系统设置里的环境变量，选择新建 如图，让后确认 再找到Java文件夹，新建如图，然后确认。 配置环境变量## 如图复制地址 再打开环境变量 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知...
CSS之(移动端)flex布局
weixin_45707229的博客
07-10 1004
移动端常用的flex布局，使用顺序：设置主轴，是否换行，设置子项在主轴和侧轴排列/对齐方式，包括多行换行和不换行的情况。
CSS技巧：使用flex:1；分配盒子剩余空间
m0_52364694的博客
09-09 2080
一个父盒子包含两个子盒子，父盒子已设置display:flex;和宽高 子盒子1设置宽高，那么子盒子设置flex:1;时会占满剩余空间。 示例代码 Document
CSS里的几个小知识
最新发布
07-08 343
在 中，rel=“stylesheet” 表示被链接的文档（即 mystyle.css）是一个样式表（style sheet），用于为当前页面提供样式定义。在 HTML 中，用于指定链接指向的资源地址。标签的属性，可以帮助搜索引擎更好地理解和索引网页，优化页面在不同设备上的显示，以及实现一些特定的功能，如自动刷新、设置字符集等。1、“rel” 是 “relation” 或 “relationship” 的缩写，意思是“关系；在 HTML 中， 标签的 rel 属性用于定义当前文档与被链接文档之间的关系。
css 弹性盒子布局flex
11-05
flex布局是一种新的布局方式，它可以非常优雅地实现子元素的居中或均匀分布，甚至可以随着窗口缩放自动适应。相比于传统的布局方式，flex布局更加灵活，可以更好地适应不同的屏幕尺寸和设备。在小程序中，flex布局是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值