弹性盒的基本含义

页面布局一直都是web应用样式设计的重点
我们传统的布局方式都是基于盒模型的
利用display、position、float来布局有一定局限性
比如说实现自适应垂直居中
随着响应式布局的流行,CSS3引入了更加灵活的弹性布局模型
flex弹性布局
使用弹性布局可以有效的分配一个容器的空间
即使我们的容器元素尺寸改变
它内部的元素也可以调整它的尺寸来适应空间

若想让一个元素变成弹性盒
很简单

.demo { /*块级元素*/
display: flex;
}

.demo { /*行级元素*/
display: inline-flex;
}

设置了flex布局后,子元素的float、clear和vertical-align属性就会失效。

弹性盒布局“容器”有如下属性

flex-flow:flex-direction,flex-wrap
justify-content
align-items
align-content

flex-direction
我们可以使用flex-direction指定主轴的方向,从而改变项目的排列方向
属性值:

row(默认)
row-reverse
column
column-reverse。

flex-wrap

我们弹性盒的项目默认都是排列在一个轴上的
这样如果项目多的话,会“弹性”压缩在一行

flex-wrap: wrap可以让我们指定当容器“装不下”项目时,是否换行
属性值如下:

no-wrap
wrap
wrap-reverse

flex-flow
flex-flow是flex-direction和flex-wrap的复合属性
两个属性都是必写的
就不多解释了
justify-content
justify-content属性定义了项目在主轴上的对齐方式
属性值如下:

flex-start:左对齐(默认)
flex-end:右对齐
center:居中
space-between:两端对齐(项目间间隔相同)

space-around:两端间隔对齐(项目间间隔是项目与边框间隔的2倍)

align-items
align-items属性定义项目在交叉轴上如何对齐
属性值如下:

stretch:未设置高度(或height: auto)的项目占满整个容器高度(默认)
flex-start :交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉轴中点对齐

baseline:项目第一行文字的基线对齐

align-content
align-content属性定义多根轴线的对齐方式
这个属性只有在容器有多条主轴是才有效,一条主轴无效
类似于justify-content属性
属性值如下:

stretch:轴线占满整个交叉轴(默认值)
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线间间隔相等

space-around:每根轴线两侧的间隔都相等

这些属性全是用在父元素身上,这次先介绍他们的含义,下一次把效果图在展示出来。

你可能感兴趣的:(弹性盒的基本含义)