一、Flex基本属性
采用 Flex
布局的元素,称为 Flex 容器(flex container)
,简称容器
。它的所有子元素
自动成为容器成员
,称为 Flex 项目(flex item)
,简称项目
。
//块级元素
.box{
display: flex;
}
//行内元素
.box{
display: inline-flex;
}
//Webkit 内核的浏览器,必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
设为 Flex
布局以后,子元素的float、clear
和vertical-align
属性将失效。
容器
默认存在两根轴:水平的主轴(main axis)
和垂直的交叉轴(cross axis)
。
二、容器属性
容器上有以下6个属性:
flex-direction
(主轴方向):row
|row-reverse
|column
|column-reverse
flex-wrap
(换行方式):nowrap
(不换行) |wrap
(第一行在上方) |wrap-reverse
(第一行在下方)flex-flow
(flex-direction
和flex-wrap
简写形式):row nowrap
(默认值)justify-content
(主轴上的对齐方式):flex-start
|flex-end
|center
|space-between
|space-around
align-items
(交叉轴上如何对齐):flex-start
|flex-end
|center
|baseline
|stretch
align-content
(多根轴线的对齐方式,只有一根轴线,该属性不起作用):flex-start
|flex-end
|center
|space-between
|space-around
|stretch
(核心是一定是盒子内部的元素超过了盒子项的宽度(默认)出现了换行,也就是有多行才可以)
三、项目属性
项目上有以下6个属性:
order
(项目的排列顺序。数值越小,排列越靠前,默认为0):<integer>
flex-grow
(项目的放大比例,默认为0):<number>
flex-shrink
(项目的缩小比例,默认为1,即如果空间不足,该项目将缩小):<number>
flex-basis
(在分配多余空间之前,项目占据的主轴空间):<length> | auto
flex
(flex-grow
,flex-shrink
和flex-basis
的简写,默认值为0 1 auto
):align-self
(允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
):auto
|flex-start
|flex-end
|center
|baseline
|stretch
参考文章
- Flex 布局教程:语法篇
- CSS Guidebook-弹性布局(很不错,例子详细)
- Flex弹性布局
- 基础知识】Flex-弹性布局原来如此简单!!
- Flex 布局教程:实例篇
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!