CSS flel布局(弹性布局/弹性盒子)
1.基本概念
Flex是Flexible Box的缩写,意为"弹性布局"或者"弹性盒子",是CSS3中的一种新的布局模式,可以简便 完整 响应式地实现各种页面布局,当页面需要适配不同的屏幕大小以及设备类型时非常使用,目前,几乎所有的浏览器都支持Flex布局
可以通过将元素的display属性设置为flex(生成块级flex容器)或inline-flex(生成类似inline-block的行内快级flex容器),当一个元素设置flex布局以后,其子元素的float、clear和vertical-align等属性将失效
CSS中提供了以下属性来实现Flex布局
属性 | 描述 |
display | 指定HTML元素的盒子类型 |
flex-direction | 指定弹性盒子中元素的排列方式 |
flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
flex-flox | flex-direction和flex-wrap两个属性的简写 |
justify-content | 设置弹性盒子中元素在主轴(横轴)方向的对齐方式 |
align-items | 设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式 |
align-content | 修改flex-wrap属性的行为,类似align-items,但不是设置子元素对齐,而是设置行对齐 |
order | 设置弹性盒子中子元素的排列顺序 |
align-slef | 在弹性盒子的子元素上使用,用来覆盖容器的align-items属性 |
flex | 设置弹性盒子中子元素如何分配空间 |
flex-grow | 设置弹性盒子的扩展比率 |
flex-shrink | 设置弹性盒子的收缩比率 |
flex-basis | 设置弹性盒子伸缩基准值 |
按照作用范围的不同,这些属性可以分为两类,分别为容器属性(flex-direction,flexwrap,flex-flow,justify-content,align-items,align-content)和项目属性(oreder,align-self,flex,flex-frow,flex-shrink,flex-basis)
2.容器属性
1)flex-direction
flex-direction属性用来决定主轴方向(即项目的排列反向),属性的可选值如下:
值 | 描述 |
row | 默认值,主轴沿水平反向从左到右 |
row-reverse | 主轴沿水平方向从右到左 |
column | 主轴沿垂直方向从上到下 |
conlumn-reverse | 主轴沿垂直方向从下到上 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承此属性的值 |
2)flex-wrap
flex-wrap属性用来设置当弹性盒子的子元素(项目)超出父容器时是否换行,属性的可选值如下:
值 | 描述 |
nowrap | 默认值,表示项目不会换行 |
wrap | 表示项目会在需要时换行 |
wrap-reverse | 表示项目会在需要时换行,但会以相反的顺序 |
initial | 将此属性设置为属性默认值 |
inherit | 从父元素继承属性的值 |
3)flex-flow
flex-flow属性是flex-direction和flex-wrap两个属性的简写,语法格式如下
flex-flow:flex-direction flex-wrap;
4)justify-content
justify-content属性用于设置弹性盒子中元素在主轴(横轴)方向上的对齐方式,属性的可选值如下
值 | 描述 |
flex-start | 默认值,左对齐 |
flex-end | 右对齐 |
center | 居中 |
space-between | 两端对齐,项目之间的间隔是相等的 |
space-arount | 每个项目两侧的间隔相等 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
5)align-items
align-items属性用来设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:
值 | 描述 |
stretch | 默认值,项目将被拉伸以适合容器 |
center | 项目位于容器的中央 |
flex-start | 项目位于容器的顶部 |
flex-end | 项目位于容器的底部 |
baseline | 项目与容器的基线对齐 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承的属性的值 |
6)align-content
align-content属性与justify-content属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式,属性的可选值如下
值 | 描述 |
stretch | 默认值,项目将被拉伸以适合容器 |
center | 项目在容器内居中排布 |
flex-start | 项目在容器的顶部排列 |
flex-end | 项目在容器的底部跑列 |
space-between | 多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部 |
space-around | 多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等 |
initial | 将此睡醒设置为属性的默认值 |
inherit | 从父元素继承的属性的值 |
3.项目属性
1)order
order属性用来设置项目在容器中出现的顺序,可以通过具体的数值来定义项目在容器中的位置,属性的语法格式如下
order:number
其中number就是项目在容器中的位置默认值为0
2)align-self
align-self属性允许为某个项目设置不同于其他的项目的对齐方式,改属性可以覆盖align-items属性设置的值,align-self属性的可选值如下
值 | 描述 |
auto | 默认值,表示元素将继承其父容器的align-items属性值,如果没有父容器,则为”stretch“ |
strech | 项目将被拉伸以适合容器 |
center | 项目位于容器的中央 |
flex-start | 项目位于容器的顶部 |
flex-end | 项目位于容器的底部 |
baseline | 项目与容器的基线对齐 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承的属性的值 |
3)flex
flex属性时flex-grow flex-shrink 和 flex-basis三个属性的简写,语法格式如下
flex:flex-grow flex-shrink flex-basis
参数说明如下
flex-grow (必填参数)一个数字,用来设置项目相对于其他项目的增长量,默认值为0;
flex-shrink(选填参数)一个数字,用来设置项目相对于其他项目的收缩量,默认值为1
flex-basis:(选填参数)项目的长度,合法值为auto(默认值,表示自动),inherit(表示从父元素继承该属性的值)或者以具体的值”%“,”px“,”em“等单位的形式
另外,flex属性还有两个快捷值,分别为auto(1 1 auto)和 none (0 0 auto)
也可以试用版flex-grow,flex-shrink,flex-basis几个属性来分别设置项目的增长量,收缩量以及项目长度