flexbox布局速查手册
考虑到flexbox布局的各种css属性五花八门,长时间不用又会忘掉大半,以此有了这篇速查手册。
入门属性
- 主轴:Main-Axis、水平方向
- 侧轴:Cross-Axis、垂直方向
- flex容器:使用flexbox时,首先声明父容器为一个flex容器
- flex项目:当父容器显示设置为flex项目,其子元素就变成了flex项目。如当无需列表
ul
显示声明display属性为flex容器,无序列表ul
就为flex容器。
flex容器的一些属性
- display: flex || inline-flex
- flex-direction: row || column || row-reverse || column-reverse
- flex-wrap: wrap || nowrap || wrap-reverse
- flex-flow(是flex-direction和flex-wrap两个属性的速记写法)
- justify-content: flex-start || flex-end || center || space-between || space-around
- align-items: flex-start || flex-end || center || strech || baseline
- align-content: 用于多行flex容器,排列效果和align-items值一样,除了baseline属性值
flex项目的一些属性
- order:使得flex项目在一个flex容器中重新排序
- flex-row:控制flex项目在容器有多余的空间如何放大,在没有额外的空间如何缩小
- flex-shrink:同上
- flex-basis:属性可以指定Flex项目的初始大小
- flex:是flex-grow、flex-shrink和flex-basis三个属性的速记属性
- align-self:auto || flex-start || flex-end || center || baseline || stretch
眼花缭乱有木有!
flex容器属性分析
- display
对于flexbox而言,有两种形式可以设定,flex
和inline-flex
,其表现形式与block
和inline-block
差别不大。默认flex。
- flex-direction
该属性控制着flex项目沿着主轴方向的排列方向。默认row。
row值:flex项目沿着Main-Axis排列,从左到右,水平排列
- flex-wrap 和 flex-reverse
flex-wrap控制flex容器的默认行为。flex容器会在一行内容纳所有flex项目,不换行排列,因为flex-wrap属性默认值nowrap
flex-flow
flex-flow是flex-direction和flex-wrap的两个属性的速记写法,可以类比border1
2
3ul {
flex-flow: row wrap; //前者为flex-direction, 后者为flex-wrap
}justify-content
该属性主要定义了flex项目在主轴上(Main-Axis)的对齐方式,默认值是flex-start(让所有flex项目Main-Axis从开始边缘,左对齐开始)space-between
属性让flex项目两者的间距相同。space-around
属性让每个flex项目都具有相同的空间。
align-items
该属性类似justify-content
,主要控制flex项目在侧轴(Cross-Axis)的对齐方式
其中,baseline
让flex项目在主轴上沿着基线对齐align-content
该属性可类比align-items
属性,控制多行flex项目在flex容器里的展现
flex项目属性分析
order
order属性允许在一个flex项目中重新排序,默认属性值为0
,可类比z-index
属性。flex-grow 和 flex-shrink
这两个属性控制flex项目在容器的多余空间内的扩展,或者没有额外空间时如何缩小,接收大于或等于零的数。
flex-grow默认值为0,即是不展开。
flex-shrink默认值是1,即是父容器小于自身,会收缩。
flex-basis
flex-basis可以指定flex项目的初始大小,即是flex-grow和flex-shrink属性调整大小适应flex容器前。
flex-basis可取任何width
属性的单位( %、em、rem、px),默认值auto,即是基于内容的多少自动计算。想固定宽度,则flex-basis: 100px
flex
flex是flex-grow、flex-shrink、flex-basis的速记属性1
2
3
4
5
6
7
8
9
10li {
flex: 0 1 auto; // 对应flex-grow、flex-shrink、flex-basis
}
// 相当于
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
不设置flex-basis的值,则为绝对flex项目,flex-basis默认值为0
(项目宽度不会随着内容多少而改变)
当设置了flex-basis
,会得到相对flex项目(项目宽度会随着内容多少而改变)
flex: 0 0 auto
相当于 flex: none
。
宽度是被自动计算,不过弹性项目不会伸展或者收缩(因为二者都被设置为零)。
flex: 1 1 auto
相当于 flex: auto
。
弹性项目会填满可用空间,在缩放浏览器时也会随之收缩。
当有多个弹性项目,并且其初始宽度flex-basis被设置为基于零的任何值时,弹性项目的宽度被根据 flex-grow值的比例来计算。
- align-self
该属性可以改变一个弹性项目沿侧轴的位置
其中,auto值选项,是将flex项目的值设置为父元素的align-items的值