目录
Flex 布局
网页布局是对于css的一个重要应用
在对于传统布局中,基于盒状模块,依赖于display属性+position属性+float属性。它对于特殊布局十分的不方便 比如垂直居中对齐就不容易实现
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
1.Flex 布局是什么?
flex布局是flexible box的缩写,意为“弹性布局”,用来为盒装模型提供最大的灵活性。
任意的容器都可以使用flex布局(前提设置了display为flex属性)
在设置完flex布局后,子元素的float,clear,和vertical-align属性都会失效
2. 基本概念
在对于采用flex布局的元素,称之为flex容器。简称“容器”,它的子元素自动成为容器的成员,称之为flex的项目,简称“项目”
容器默认存在两根轴:水平的主轴(main axis) 和垂直的交叉轴(cross axis)。
项目一半默认沿主轴排列。单个项目占据主轴空间叫做main size ,占据交叉轴空间叫做cross size
3.容器的属性
设置在容器的属性如下
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-items
6.align-content
3.1 flex-direction 属性
.box {
flex-direction: row | row-reverse | column | column-reverse;
flex-direction: 行|翻转行|列|翻转列
}
flex-direction 属性决定主轴的方向(项目的排列方向)
row (默认值):主轴为水平方向,起点在左端
row-reverse :主轴为水平方向,起点在右端
column : 主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
3.2 flex-wrap 属性
默认情况下,项目都排在一条线(又称“轴线”)上。flex-wrap属性定义,如果一条轴线排不下就会换行
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap :不换行
wrap:换行
wrap-reverse:换行,第一行在下方
3-3 flex-flow
flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式 默认为 row nowrap
3-4 justify-content 属性
该属性定义了项目在主轴上的对齐方式
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
5个值,所对齐的方向也有所不同
- flex-start :左对齐
- flex-end :右对齐
- center:居中对齐
- space-between:两端对齐,项目之间的间隔都相等
- space-around:每个项目两侧间隔相同,所以,项目之间的间隔比项目与边框的间隔大一倍。
3-5:align-items属性
该属性定义项目在交叉轴上如何对齐
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
该属性有5个值可选,具体的对齐方式与交叉轴的方向有关。
- flex-start :交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐
- center:交叉轴的中点对齐
- baseline:项目的第一行文字的基线对齐
- stretch:如果项目未设置高度或设为auto。
3-6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性有6个值可取
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。stretch
(默认值):轴线占满整个交叉轴。
4.项目上的属性
以下有6个属性可以设置在项目上:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order 属性
该属性定义项目的排列顺序。数值越小,排列越靠前,默认为0
.item {
order: <integer>;
}
4-2 flex-grow 属性
flex-grow 属性定义了项目的放大比例,默认为0
.item {
flex-grow: <number>; /* default 0 */
}
注: 如果项目中的flex-grow 属性为1 时,则将它们进行等分处理。
4-3 flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例,默认为 1
.item {
flex-shrink: <number>; /* default 1 */
}
注:如果所有的项目的flex-shrink 属性都为1 ,都将等比例缩小。如果一个项目的flex-shrink属性为0 ,其余为1 。当空间不足时,前者不会缩小
4-4 flex-basis 属性
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间。 默认为 auto 、
.item {
flex-basis: <length> | auto; /* default auto */
}
注:它可以设为跟width 和height 一样的值 ,则项目将占据固定空间。
4-5 flex 属性
flex 属性 是flex-grow ,flex-shrink 和flex-basis 属性的简写形式,默认值为 0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
注: 该属性有两个快捷值:auto(1 1 auto )和 none(0 0 auto )
建议优先使用这个属性 ,而不是单独写三个分离的属性 ,因为浏览器会推算相关值、
4-6 align-self 属性
align-self 属性 允许单个项目与其他项目不一样的对齐方式,可覆盖 容器中的align-items
属性。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可以取6个值,除了auto ,其他都于align-items 属性一致相同