极简flex布局 flex布局视频教程
yuyutoo 2024-10-25 19:17 2 浏览 0 评论
flex布局
flex布局又称弹性布局,是一种新型的布局方式，相比传统的div+float布局，使用更为简单，功能更为强大，对于不需要太考虑浏览器兼容性的后台管理系统，H5,APP是布局的第一选择。
开启弹性布局
在容器上加上display:flex就能开启弹性布局，该容器就被称为flex container,第一层子元素则是flex item.我们用以下代码讲解
<html>
<body>
<div class="container">
<div class="item1 item">item1</div>
<div class="item2 item">item2</div>
<div class="item3 item">item3</div>
</div>
<style lang="scss" scoped>
.container {
display: flex;
background-color: orange;
.item {
width: 60px;
height: 100px;
}
.item1 {
background-color: red;
}
.item2 {
background-color: green;
}
.item3 {
background-color: blue;
}
}
</style>
</body>
</html>?编辑
flex布局有主轴和交叉轴，主轴默认从左往右，交叉轴默认从上到下,有了这些了解就可以讲解具体属性了。
flex container相关属性
flex-direction:控制主轴方向
默认row即从左往右,column表示主轴是从上往下
justify-content:决定item在主轴上的对齐方式
?编辑
flex-start默认值，与主轴start对齐,flex-end,与主轴end对齐,center居中对齐，space-between两端对齐并距离相等,space-evenly,flex item之间距离相等，与两边边距距离等于flex item之间距离
space-around:flex item之间距离相等，与两边边距距离等于flex item之间距离的一半
align-items:决定flex item在交叉轴上的对齐方式
?编辑
normal,默认，效果跟stretch一样
stretch:当flex item没在交叉轴方向设置size,则会自动拉伸至填充flex container
flex-start:与交叉轴头对齐,flex-end:与交叉轴尾部对齐,center:居中,baseline:与基准线对齐
flex-wrap:决定了flex是单行还是多行,默认情况下在一行显示，显示不下会收缩item
?编辑
flex-wrap: nowrap默认, wrap换行
align-content:决定多行item在交叉轴上的对齐方式
?编辑
align-content决定多行item在交叉轴上的对齐方式,flex-start,flex-end,center,space-between,space-around,space-evenly,效果跟justify-content差不多，只是作用于交叉轴
flex item属性
align-self:覆盖flex container设置的align-items，决定自身在交叉轴的对齐方式
flex-grow:决定了flex item的扩展
默认0，也就是就算有剩余空间也不会扩展，如果有3个flex item，并且flex-grow都设置为1，则每个item会扩展1/3的剩余空间。比如要三等分一个flex container,则设置flex-grow:1;width:0;因为item的width为0，则全部是剩余空间，再按照flex-grow就能等分了，如果不设置width:0,则item的初始宽度不同，会造成平均分配剩余空间后最终宽度不同。
flex-shrink:收缩比例
默认为1，表示当空间不足时会等比收缩。
flex-basis:item主轴上size
默认值为auto，也就是根据内容宽度来。需要说明的width的优先级高于flex-basis.也许你有个疑问，既然有了width为啥还要flex-basis的？因为flex的主轴是会变动的，如果flex-direction为column那就需要用height来控制了，而有了flex-basis不管主轴指向哪都能控制
flex:flex-grow flex-shrink和flex-basis的合体
flex默认是0 1 auto;也就是flex-grow:0,flex-shrink:1,flex-basis:auto;
flex:1;等同于flex-grow:1;
flex: 1 2 等同于flex-grow:1; flex-shrink:2
flex:1 2 100px等同于flex-grow:1; flex-shrink:2; flex-basis:100px;
?
相关推荐
- jQuery VS AngularJS 你更钟爱哪个?
-
在这一次的Web开发教程中，我会尽力解答有关于jQuery和AngularJS的两个非常常见的问题，即jQuery和AngularJS之间的区别是什么？也就是说jQueryVSAngularJS？...
- Jquery实时校验，指定长度的「负小数」，小数位未满末尾补0
-
在可以输入【负小数】的输入框获取到焦点时，移除千位分隔符，在输入数据时，实时校验输入内容是否正确，失去焦点后，添加千位分隔符格式化数字。同时小数位未满时末尾补0。HTML代码...
- 如何在pbootCMS前台调用自定义表单?pbootCMS自定义调用代码示例
-
要在pbootCMS前台调用自定义表单，您需要在后台创建表单并为其添加字段，然后在前台模板文件中添加相关代码，如提交按钮和表单验证代码。您还可以自定义表单数据的存储位置、添加文件上传字段、日期选择器、...
- 编程技巧:Jquery实时验证，指定长度的「负小数」
-
为了保障【负小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【负小数】的方法。HTML代码<inputtype="text"class="forc...
- 一篇文章带你用jquery mobile设计颜色拾取器
-
【一、项目背景】现实生活中，我们经常会遇到配色的问题，这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...
- 编程技巧:Jquery实时验证，指定长度的「正小数」
-
为了保障【正小数】的正确性，做成了通过Jquery，在用户端，实时验证指定长度的【正小数】的方法。HTML做成方法<inputtype="text"class="fo...
- jquery.validate检查数组全部验证
-
问题：html中有多个name[]，每个参数都要进行验证是否为空，这个时候直接用required:true话，不能全部验证，只要这个数组中有一个有值就可以通过的。解决方法使用addmethod...
- Vue进阶(幺叁肆):npm查看包版本信息
-
第一种方式npmviewjqueryversions这种方式可以查看npm服务器上所有的...
- layui中使用lay-verify进行条件校验
-
一、layui的校验很简单，主要有以下步骤：1.在form表单内加上class="layui-form"2.在提交按钮上加上lay-submit3.在想要校验的标签，加上lay-...
- jQuery是什么?如何使用? jquery是什么功能组件
-
jQuery于2006年1月由JohnResig在BarCampNYC首次发布。它目前由TimmyWilson领导,并由一组开发人员维护。jQuery是一个JavaScript库，它简化了客户...
- django框架的表单form的理解和用法-9
-
表单呈现...
- jquery对上传文件的检测判断 jquery实现文件上传
-
总体思路：在前端使用jquery对上传文件做部分初步的判断，验证通过的文件利用ajaxFileUpload上传到服务器端，并将文件的存储路径保存到数据库。<asp:FileUploadI...
- Nodejs之MEAN栈开发(四)-- form验证及图片上传
-
这一节增加推荐图书的提交和删除功能，来学习node的form提交以及node的图片上传功能。开始之前需要源码同学可以先在git上fork：https://github.com/stoneniqiu/R...
- 大数据开发基础之JAVA jquery 大数据java实战
-
上一篇我们讲解了JAVAscript的基础知识、特点及基本语法以及组成及基本用途，本期就给大家带来了JAVAweb的第二个知识点jquery，大数据开发基础之JAVAjquery，这是本篇文章的主要...
- 推荐四个开源的jQuery可视化表单设计器
-
jquery开源在线表单拖拉设计器formBuilder(推荐)jQueryformBuilder是一个开源的WEB在线html表单设计器，开发人员可以通过拖拉实现一个可视化的表单。支持表单常用控件...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)