FlexBox布局
最近在重新稳固些基础知识以备面试,正好ife的第一波任务来袭,step1的基础任务不少而且都是关于HTML&CSS,选了其中几个做一做正好当复习了。做的第一个任务是task10,练习flex box布局,这里简单讲下我对flex的理解。
flex,英文中弯曲的意思,在css中的表示一种布局方式即Flexible Box,在flex出现之前,布局的传统方案大多是基于盒装模型,依赖display+position+float属性,这种布局使得一些特殊布局十分不便,如垂直居中。
一、Flex布局是什么?
它是W3C提出了一种新的布局方案,可以简便、完整、响应式地实现各种页面布局。
任何容器都可以设置为flex布局。在属性中设置
|
|
即可。
这样我们就将box设置为一个Flex容器(flex container),它其中所有子元素都自动成为了容器成员,称为(flex item)。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、容器属性
容器的六种属性:
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
- flex-flow
2.1 flex-direction
这一属性定义主轴的方向,我们有四个值可以定义
|
|
它可能有4个值。
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2.2 flex-wrap
这个主要用来定义伸缩容器里是单行还是多行显示,侧轴的方向决定了新行堆放的方向。
有三个值
- nowrap:默认,不换行
- wrap:换行,第一行在上方
- wrap-reverse:换行,第一行在下方
2.3 justify-content
- flex-start(默认值):伸缩项目向一行的起始位置靠齐。
- flex-end:伸缩项目向一行的结束位置靠齐。
- center:伸缩项目向一行的中间位置靠齐。
- space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。
- space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。
2.4 align-items
定义项目在交叉轴上如何对齐
它可能取5个值
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
2.5 align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
该属性可能取6个值。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的 间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
2.6 flex-flow
是flex-deriection和flex-wrap的合并用法,默认值为
三、 项目属性
一下属性用在项目上
- order:
默认情况下,伸缩项目是按照文档流出现先后顺序排列。然而,“order”属性可以控制伸缩项目在他们的伸缩容器出现的顺序。
order: -1;
数值越小顺序越靠前
- flex-grow:
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- flex-shrink:
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
|
|
- flex-basis:
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
- flex:
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
..item {
flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
}
- align-self:
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
|
|