文享日志

flex布局知识点

CSS Flex

发表于2017年12月10日22:52:40

0条评论 224次阅读

flex是Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。


任何容器都可以设置成flex布局。

块级元素:display:flex;

内联元素:display:inline-flex


进行flex布局的元素为一个容器,容器中的子元素自动成为容器成员,成为容器项目,简称项目。


容器存在两根轴,水平的主轴,垂直主轴的交叉轴。

主轴方向默认从左到右,左端端点叫做main start,右端端点叫做main end

交叉轴方向默认从上到下,上端端点叫做cross start,下端端点叫做cross end


项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size


设置成flex布局的容器有以下属性:

flex-direction :row(默认)    |    row-reverse    |    column    |    column-reverse

该属性用来设置主轴方向。


flex-wrap:nowrap(默认)    |    wrap    |    wrap-reverse

该属性设置项目是否换行。


flex-flow:flex-direction与flex-wrap的简写。参数可以写成row wrap这样 


justify-content:flex-start(默认) | flex-end | center | space-between | space-around 

该属性设置项目在主轴上的对齐方式

space-between两端对齐,项目之间的间隔都相等

space-around每隔项目两侧间隔相等


align-items:flex-start | flex-end | center | baseline | stretch(默认)

​定义项目在交叉线的对齐方式

baseline设置项目的第一行文字的基线对齐。

 stretch设置项目没有设置宽高或auto,则项目占满整个容器高度。


align-content:flex-start | flex-end | center | space-between | space-around | stretch(默认)

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

​flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。


项目属性有:

order:定义项目的排列顺序,参数为数值,默认为0

flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

flex-shrink:定义项目的缩小比例,默认为1,即缩小。定义为0,不缩小

flex-basis:定义了在分配多余空间之前,项目占据的主轴空间(main size).值为长度或者auto或者百分比

flex:flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,后两个值可省略

align-selfauto | flex-start | flex-end | center | baseline | stretch;

允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch


参考来源:

阮一峰的网络日志《flex布局教程:语法篇》

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


布局实例可参考:

阮一峰的网络日志《flex布局教程:实例篇》

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广