CSS布局之弹性布局
Flex(弹性布局)
,是一种响应式布局,能自动伸缩盒模型达到自适应的效果。
弹性布局由弹性容器(flex container)
和弹性项目(flex item)
组成。
在弹性容器
中,水平方向称为主轴(main axis)
(起点main start
,终点main end
);垂直方向称为纵轴(cross axis)
(起点cross start
,终点cross end
)。
在弹性项目
中,元素的宽度称为main size
,高度称为cross size
。
弹性容器
通过display: flex
属性,可将元素声明块级弹性容器;通过dsplay: inline-fex
,可将元素声明为行内弹性容器。
- flex-direction属性
flex-direction
指定主轴(main cross)
的方向,即元素排列的方向。
// 需先声明为flex布局
flex-direction: row | row-reverse | column | column-reverse
// 属性解释:
row: 水平方向,从左往右
row-reverse: 水平方向,从右往左
column: 垂直方向,从上往下
column-reverse: 垂直方向,从下往上
- flex-wrap属性
flex-wrap
属性,指定弹性项目的换行方式,即弹性项目超过一行时如何换行。
flex-wrap: no-wrap | wrap | wrap-reverse
// 属性解释:
no-wrap: 不换行(默认)
wrap: 正常换行
wrap-reverse: 换行,第一行在下方,从下往上换行
- flex-flow属性
flex-flow
属性,为flex-direction
和flex-wrap
的合并属性。
// 第一个为flex-direction,第二个为flex-wrap
flex-fow: <flex-direction> <flex-wrap>
- justify-content属性
justify-content
属性,指定弹性内容在主轴上的排列方式。
justify-content: flex-start | flex-center | flex-end | space-between | space-around
// 属性解释:
flex-start: 从主轴起点(main start)到主轴终点(main end)
center: 居中
flex-end: 从主轴终点(main end)到主轴起点(main start)
space-between: 项目周围的空间相等,但空隙会折叠
space-between: 项目周围的空间相等,但空隙不折叠
- align-items属性
align-items
属性,指定弹性项目
在纵轴上的对齐方向。
align-items: flex-start | center | flex-end | base-line | stretch
// 属性解释:
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认),从起点(cross start)到终点(croos end)
- align-content属性
align-content
属性,指定当主轴(main axis)
随项目换行时,多条主轴线如何对齐。
align-content: flex-start | center | flex-end | space-between | space-around | stretch
// 属性解释:
flex-start: 从纵轴起点(cross start)到终点(cross end)
center: 居中
flex-end: 从纵轴终点(cross end)到纵轴起点(cross start)
space-between: 项目周围的空间相等,但空隙会折叠
space-between: 项目周围的空间相等,但空隙不折叠
stretch: 拉伸(默认),拉伸项目以布满纵轴长度
- 为什么没有justify-items属性呢?
尽管flex看起来像二维布局,但其实是个一维布局,纵轴(cross axis)
没有换行(wrap)
的行为,自然就没有justify-items属性。
弹性项目
尽管弹性容器
已经有设置弹性项目
的各种布局行为,但总有个别弹性项目
需要自定义布局方式。
- order属性
order
属性,指定弹性项目
的排列序号,数值越小越靠前。
order: <integer>
- flex-grow属性
flex-grow
属性,指定弹性项目
在有空余空间的放大比例。
// 默认为0:表示即使有剩余空间也不放大
flex-grow: <number>
- flex-shrink属性
flex-shrink
属性,指定弹性项目
在空间不够时的缩小比例。
// 默认为1:表示空间不够时项目将缩小
flex-shrink: <number>
- flex-basis属性
flex-basis
属性,指定弹性项目
的基本长度。
flex-basis: <length>
- flex属性
flex
属性,为flex-grow
、flex-shrink
和flex-basis
的合并属性。
flex: flex-grow,flex-shrink,flex-basis
// 补充:
默认: 0,1,auto
auto: 1,1,auto
none: 0,0,auto
- align-self属性
align-self
属性,指定弹性项目
在纵轴上的对齐方式,将覆盖掉弹性容器
的align-items
属性。
align-self: auto flex-start | center | flex-end | base-line | stretch
// 属性解释:
auto: 自动
flex-start: 项目对齐纵轴的起点(cross start)
center: 居中
flex-end: 项目对齐纵轴的终点(cross end)
baseline: 基于基线对齐
stretch: 拉伸(默认),从起点(cross start)到终点(croos end)