浅谈flex布局

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几个属性来分别设置项目的增长量，收缩量以及项目长度