Flexbox属性介绍
介绍
flexbox是HTML5中提出的新的布局方式。
使用时,需要将父子节点的display
都设置为flex
。
每个参赛的效果可以参考这里
父节点属性
flex-direction
控制子界点的方向。一共有4个值:
.container {flex-direction: row; // default 从左往右,靠父节点左边flex-direction: row-reverse; // 从右往左,靠父节点右边flex-direction: column; // 从上往下,靠父节点顶部flex-direction: column-reverse; // 从下往上,靠父节点底部
}
flex-wrap
控制子元素是否是现在在一行中。如果设置为显示到一行中,但是子元素的宽度和大于父节点宽度,那么子元素会对应缩小。
.container {flex-wrap: nowrap; // default 显示到一行中flex-wrap: wrap; // 多行显示,行顺序顺序显示flex-wrap: wrap-reverse; // 多行显示,行顺序倒序显示
}
flex-flow
flex-direction
和flex-wrap
两个的简写。
flex-flow: [flex-direction] [flex-wrap]
align-items
控制子元素的上下对齐方式。一共有5个值。
.container {align-items: flex-start; // 容器顶部对齐align-items: flex-end; // 容器底部对齐align-items: center; // 中间对齐align-items: baseline; // 子元素文字baseline对齐align-items: stretch; // 上下对齐,会改变子容器的高度
}
justfy-content
父容器同向多余空间的展示方式。有6个值。
.container {justfy-content: flex-start; // 子元素靠前,多余空间靠后justfy-content: flex-end; // 子元素靠后,多余空间靠前justfy-content: center; // 子元素剧中,多余空间平均放前后justfy-content: space-between; // 多余空间放子元素中间justfy-content: space-around; // 多余空间环绕元素周边
}
align-content
类似于justfy-content
, 管理父容器垂直方向多余空间的展示。6个值。
.container {align-content: flex-start; // 子元素靠前,align-content: flex-end; // 子元素靠后align-content: center; // 子元素居中,多余空间放前后align-content: stretch; // 子元素铺满整个父容器align-content: space-between; // 多余空间放子元素中间align-content: space-round; // 多余空间环绕元素周边
}
子节点属性
algin-self
同algin-item
,不过algin-self
是作用于子元素自己。应该有6个值
.item {align-self: auto; // default 默认模式,按照父节点的algin-item来显示align-self: flex-start; // 顶部对齐align-self: flex-end; // 底部对齐align-self: center; // 居中对齐align-self: baseline; // baseline对齐align-self: stretch; // 填充满
}
flex-grow
子元素间的大小比例。
.item {width: 100px;
}
.item01 {flex-grow: 1;
}
.item02 {flex-grow: 2;
}
flex-shrink
超出父容易后的收缩比率。 举个例子:父容器400px;有三个子元素,都是200px;当设置第三个子元素flex-shrink
为3时,子元素的收缩比率就是1:1:3。
一共超出父元素200px;那么收缩的比率是40px:40px:120px; 也就是说子元素的实际展示宽是160px, 160px, 80px。
.container {width: 400px;
}
.item {width: 200px;
}
.item03 {flex-shrink: 3;
}
flex-basis
如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
.item {flex-basis: 10px;
}
flex
flex-grow
, flex-shrink
, flex-basis
三者的简写。
.item {flex-grow: [flex-grow] [flex-shrink] [flex-basis];
}
order
控制子元素的顺序。order会改变子元素排序的先后。
.item01 {order: 2;
}
.item02 {order: 1;
}
Flexbox属性介绍相关推荐
- CSS3 flexbox 布局 ---- flex项目属性介绍
CSS3 flexbox 布局 ---- flex项目属性介绍 现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设d ...
- 理解CSS3 Flexbox
一.前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS ...
- 14 张有趣深动图解 FlexBox !
译者:前端小智 来源: dev 作者:Joy Shaheb 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https:// ...
- flexbox布局的兼容性
http://ayqy.net/blog/flexbox布局的兼容性/ 写在前面 flex布局早在2009年就有了,而现在是2015年6月8日,使用最新的flex语法会发现支持程度并不好,即使是在&q ...
- css flexbox模型_5分钟内学习CSS Flexbox-初学者教程
css flexbox模型 快速介绍流行的布局模块 (A quick introduction to the popular layout module) In this post, you'll l ...
- flexbox布局_这是您可以使用FlexBox制作的5种布局
flexbox布局 The CSS Flexible Box Layout - Flexbox - provides a simple solution to the design and layou ...
- (转)详解css3弹性盒模型(Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- 设置子元素在主轴(横轴)方向上的对齐方式为容器的开头_今日推送 CSS Flexbox布局(上)...
在" Flexbox布局"模块之前,有四种布局模式: 四种布局模式: 块布局block,常见的就是div 内联inline,用于文本 表table,用于二维表数据 定位positi ...
- Flexbox Guide
Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力. 基本介绍 浏览器兼容性 启用Flexbox 容器属 ...
- React-Native中的flexbox布局的使用
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/72672404 本文出自:[顾林海的博客] 前言 在编写React Na ...
最新文章
- 链表问题4——反转双向链表
- 附录3:Pandas实例记录
- nginx响应高并发参数配置
- c++ primer5th,习题12.24
- cad考试题库绘图题答案_证券从业资格考试证券市场基本法律法规题库答案
- c++ 读文件_第十六节:读文件,文件的创建,写文件,文件的读写以及鼠标键盘事件和图形绘制...
- edge浏览器什么相当于ie的中低_Microsoft Edge浏览器
- python学习 第一篇 基础
- MEF: MSDN 杂志上的文章(15) 拒绝【多个导出,但只用一个导入,会拒绝,但还是稳定的组合】...
- java题-如何递归遍历一个文件夹下的所有文件
- 计算机动漫与游戏制作画画教学,科普下动漫制作必须会画画吗
- cmd cvf war包
- 新网银行杯数据科学竞赛复赛第八名总结
- Mysql查询(基于某酒店2000w条数据)
- 【超图+CESIUM】【基础API使用示例】09、超图|CESIUM - 场景分屏设置
- 基于MyEclipse+JSP+Mysql+Tomcat开发得塞北村镇旅游网站设计
- Field属性(域)
- 【GPT-4】立即停止训练比 GPT-4 更强的模型,至少六个月!马斯克、图灵奖得主等数千 AI 专家紧急呼吁
- 书籍_《未来世界的幸存者》阮一峰--2/5
- 重庆大学计算机信息管理基础2013,重庆大学计算机信息管理基础课程考试试卷B.doc...