Flex布局学习

传统的网页布局中,我们经常使用display:block+margin+padding+float+position来实现,但随着网页越来越复杂,对于某些不确定宽高的元素想要实现垂直居中实际上是比较困难的,而随着CSS3中Flex布局的出现,解决了传统布局中一些不易实现的问题。

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

Flex布局具有以下特点:

1、Flex布局与方向无关。
2、Flex布局可以实现空间的自动分配、自动对齐,具有很强的灵活性。
3、Flex布局试用于简单的线性布局,更复杂的布局可以考虑用JS或者grid实现。

一、Flex布局的概念

在容器内,默认有两条轴,水平方向为主轴(main axis),垂直方向为侧轴(cross axis),主轴方向起始位置为主轴起点(main start),主轴方向终点位置为主轴终点(main end),侧轴方向起始位置为侧轴起点(cross start),主轴方向终点位置为主轴终点(cross end),容器的主尺寸为main size,侧尺寸为cross size,容器内的子元素为flex item,当给container设置display:flex,每一个子元素都是container的item。

二、Flex容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction属性

flex-direction表示主轴的方向。

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

row:主轴方向为水平方向,从左至右。

flex-direction:row;

row-reverse:主轴方向为水平方向,从右至左。

flex-direction:row-reverse;

column:主轴方向为垂直方向,从上至下。

flex-direction:column;

column-reverse:主轴方向为垂直方向,从下至上。

flex-direction:column-reverse;

flex-wrap属性

flex-wrap: no-wrap(默认)| wrap | wrap-reverse;

flex-wrap是指在主轴方向上如果项目过多排列不下时是否换行,默认情况下是不换行的。
wrap:轴线方向换行,第一行在上。

flex-wrap:wrap;

wrap-reverse:轴线方向换行,第一行在下

flex-wrap:wrap-reverse;

flex-flow属性

flex-flow是flex-direction和flex-wrap的简写,默认为 row no-wrap。

flex-flow: <flex-direction> || <flex-wrap>;

justify-content属性

justify-content是指主轴方向对齐方式。

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

flex-start:主轴方向从左端对齐。

justify-content:flex-start;

flex-end:主轴方向从末端对齐。

justify-content:flex-end;

center:主轴方向从中间对齐。

justify-content:center;

space-between:主轴方向两端对齐,项目之间的空间均匀分配。

justify-content:space-between;

space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

justify-content:space-around;

align-items属性

align-items 是指侧轴方向对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start:侧轴方向上端对齐。


align-items:flex-start;

flex-end:侧轴方向底端对齐。


align-items:flex-end;

center:侧轴方向中心对齐。


align-items:center;

baseline:侧轴方向上文字基线对齐。

align-items:baseline;

strech(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

align-items:strech;

align-content属性

align-content属性定义了多根轴线(多行或是多列)的对齐方式。如果项目只有一根轴线(一行或是一列),该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

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

align-conten:flex-start;

flex-end:与交叉轴的终点对齐。

align-content: flex-end;

center:与交叉轴的中点对齐。

align-content: center;

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

align-content: space-between;

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

align-content: space-around;

stretch(默认值):轴线占满整个交叉轴。

align-content: strech;

三、Flex项目的属性

align-self
flex-grow
flex-shrink
flex-basis
flex
order

align-self属性

align-self属性定义flex的单个项目在侧轴上的对齐方式,默认为auto,表示继承父元素的align-items,否则将覆盖align-items属性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

center:


align-self: center;

其他值与align-items属性值用法相同。

flex-grow属性

flex-grow定义项目的扩展比率(一般使用在空间过多时),默认为0,即便存在剩余空间,也不放大。

flex-grow: <number> ;   /* default 0 */

如果所有的项目不为0,如1/2/3,则等分剩余空间,如果item1项目为1,其他项目为0,则item1占据所有剩余空间,如果item1项目为1,item2项目为2,则item2占据的剩余空间比item1多一倍。

.item1{flex-grow: 1;}
.item1{flex-grow: 1;} .item2{flex-grow: 2;}

flex-shrink属性

flex-shrink定义项目的收缩比率(一般使用在空间不足时),默认为1,即空间不足时,项目缩小,为0表示不缩小。
该属性对负值无效。

 flex-shrink: <number>; /* default 1 */

如果所有项目均为1,则所有项目同比例缩小


.item{flex-shrink: 1;}

如果item1为0,其他item均为1,则item1不缩小,其他item同比例缩小


.item1{flex-shrink: 0;}

flex-basis属性

flex-basis定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

 flex-basis: <length> | auto; /* default auto */
.item1{flex-basis: 400px;}

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

order属性

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
该属性对负值有效。

order: <integer>;

关于各属性浏览器的支持程度可以在can I use中查看

推荐阅读更多精彩内容

  • flex布局基础知识 main axis(主轴): Flex容器的主轴主要用来配置Flex项目。它不一定是水平,这...
    前端小兵阅读 152评论 0 1
  • 学习自阮一峰Flex 布局教程 注意 设为 Flex 布局以后,子元素的float、clear和vertical-...
    ChrysAwesome阅读 45评论 0 0
  • polyfill 兼容某些浏览器的保险写法 容器的属性 1.flex-direction2.flex-wrap3....
    Point_halo阅读 149评论 0 0
  • 传统布局:依赖display/position/float Flex :Flex Box ,用来为盒状模型提供最大...
    冥冥2017阅读 91评论 0 0
  • flex是flexible的缩写,意思为弹性布局 flex布局出现,vertical-align,float,cl...
    Lemon不怕酸啊阅读 33评论 0 0