css 之 flex 弹性布局浅浅的理解

最新推荐文章于 2022-04-24 16:17:51 发布
最新推荐文章于 2022-04-24 16:17:51 发布
阅读量179 收藏
点赞数 1
分类专栏： css html 文章标签： css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwhwoaini1314/article/details/79700313
版权
html 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

这几天做项目的时候,用的布局方式一般都是用

display    float   来实现一个布局效果

偶然的看到flex才知道,原来我们有了更好的解决方式,这个属性是W3标准,可以放心使用,几乎兼容所有的主流浏览器

display: flex;

行内元素可以 display: inline-flex;

下面是我的个人学习,只有一点点,后续会加上

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎来到华哥的弹性布局- 你的一哥</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
div.p {
display: flex;    /*  定义容器的属性  */
flex-direction: column;
border: 1px solid red;
width: 600px;
height: 500px;
align-items:  flex-start; /* 项目严交叉轴对应方式 = 即是垂直方向上的排序. */
}
div.children {
box-sizing: content-box;
display: flex;
/*flex-wrap: wrap;   是否换行 - 项目*/
flex-flow: row wrap;
/*justify-content: space-between;*//* 项目在主轴的对应方式 = 只要是flex里面的子元素都是自己的项目 */
border: 1px solid green;
width: 400px;
height: 88px;
}
div.children2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: stretch;
border: 1px solid #999;
width: 400px;
height: 200px;
}
div.children2 .son {
border: 1px solid brown;
width: 160px;
height: 64px;
}
.one {
order: 2;
}
.two {
order: 5; /*属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
}
.three {
order: 7;
}
div.son {
display: flex;
border: 1px solid pink;
width: 66px;
height: 44px;
}
div span {
border: 1px solid #000000;
display: inline-flex;
width: 30px;
height: 44px;
}
div.brother {
border: 2px solid royalblue;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="p">
<div class="children">
<div class="son">
<span>

</span>
</div>
<div class="son">
<span>

</span>
</div>
<div class="son">
<span>

</span>
</div>
<div class="son">
<span>

</span>
</div>
<div class="son">
<span>

</span>
</div>
<div class="son">
<span>

</span>
</div>
</div>
<div class="children2">
<div class="son one">
<span>
5
</span>
</div>
<div class="son two">
<span>
6
</span>
</div>
<div class="son three">
<span>
7
</span>
</div>
</div>
</div>
<div class="brother">

</div>
</body>

</html>


主要参考的是  : http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

有兴趣的可以看看,写的不错的.

lwhwoaini1314
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
深入理解 CSS3 弹性盒布局模型
weixin_30237281的博客
01-06 118
Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。这也使得布局的逻辑变得更加复杂。本文介绍的是 CSS3 规范中引入的新布局模型：弹性盒模型（f...
CSS3 Flex 弹性布局用法详解
Just Code
10-15 378
什么是Flex弹性布局 Flex是Flexible Box的简称，意为弹性布局，顾名思义，在网页布局时，他可以给我们提供更多的灵活性。 说明： 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后，子元素的float，clear，还有verticle-align属性都不起作用。 3. 设置了display:flex属性的元素...
CSS3弹性伸缩布局(一)——box布局
weixin_30868855的博客
08-23 362
CSS3弹性伸缩布局简介 2009年，W3C提出了一种崭新的方案----Flex布局（即弹性伸缩布局），它可以简便、完整、响应式地实现各种页面布局，包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段，并且它还分为旧版本、新版本以及混合过渡版本三种不同的编码方式。其中混合过渡版本主要是针对IE10做了兼容。目前flex布局用得比较多的还是在移动端的布...
e.target 和 e.currentTarget 的区别？
huangzhin的博客
04-24 508
e.target 和 e.currentTarget 的区别
关于弹性布局的详细解析
William526的博客
12-05 517
https://www.cnblogs.com/xuyuntao/articles/6391728.html
flex弹性布局的理解。
06-15
帮助理解flex属性。 1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性1. 什么是 flex 布局 2. 基本概念 3. 容器的属性 4. 项目的属性 帮助理解项目属性 1. order 2. flex-grow 3. flex-shrink 4. flex-...
css flex 弹性布局详解
12-30
案例基础布局 html <li class=item></li> <li class=item></li> <li class=item></li> <li class=item></li> css .box{ display: -webkit-flex; display: flex; } .item{ width: 200px;
html/css弹性布局的几大常用属性详解
ting2909的博客
09-10 3340
弹性布局的名称概念： 1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。 2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。 弹性布局的重要的几大基础属性： 1、flex-direction属性决定主轴的方向（即项目的排列方向）。 row（默认值）： 主轴为水平方向，起点在左端； row...
【图像加密解密】 GUI混沌序列图像加密解密（含相关性检验）【含Matlab源码 1862期】.zip
05-17
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
【图像压缩】 GUI多级树集合分裂排序spiht图像压缩（含PSNR）【含Matlab源码 2688期】.zip
05-17
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
node-v0.10.45-linux-x86.tar.xz
05-17
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
【疾病识别】 GUI机器视觉肺癌检测系统【含Matlab源码 1922期】.zip
05-17
【疾病识别】 GUI机器视觉肺癌检测系统【含Matlab源码 1922期】
18订单变更单.xls
05-17
18订单变更单.xls
基于 GrocerEye，在 YOLOv5 上训练和推断
最新发布
05-17
基于 GrocerEye，在 YOLOv5 上训练和推断 数据 它来自 GrocerEye 存储库的数据集，全部归功于它！ 对结构进行了修改，以满足 yolov5 的特征 依赖 这里使用的是 YOLOv5 6.2，它与 Python 3.7 配合得更好 笔记本可以在 Kaggle 或 Colab 上运行，没有问题。
springCloud+gateway+nacos
05-17
从零搭建nacos,gateway
【图像配准】 SURF算法红外与可见光图像配准（含RMSE）【含Matlab源码 4401期】.zip
05-17
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
【图像配准】双目视觉sift特征点匹配图像配准【含Matlab源码 4028期】.zip
05-17
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
记录销毁申请单.doc
05-17
记录销毁申请单.doc
css flex弹性布局display flex
11-24
CSS3 引入了弹性盒布局，又称为 Flex 布局。Flex 布局是一种更加高效的布局方式，可以方便地实现各种复杂的布局效果。其中，`display: flex` 是将一个容器指定为 Flex 布局的方式之一。 下面是一个简单的例子，展示...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值