Flex布局

常用的布局方式有3种:

  • display:css内联和块级布局。
  • position:绝对、相对定位布局。
  • float:浮动布局。

传统的布局方式存在一个很明显的问题,那就是垂直居中不易实现。

flex:弹性盒子布局,可以更好的实现响应式布局。

Flex的使用

Flex容器

任何容器都可以flex布局。Flex容器的所有子元素也自动成为容器的成员,成为Flex项目Flex容器默认存在2根轴线(水平主轴和垂直交叉轴),布局就是根据这2根轴来排列项目显示的。

块级元素:display:flex;

内联元素:display:inlne-flex;

使用了flex布局后,项目的float、clear、vertical-align都将失去效果。

Flex容器属性

1.flex-direction

设置项目的排列方向。

flex-direction: row | row-reverse | column | column-reverse;
  • row(默认值):主轴为水平方向,起点在左端。

    从左往右排。如果超出容器宽度,容器会根据项目的宽度进行等比缩放

  • row-reverse:主轴为水平方向,起点在右端。

    从右往左排,如果超出容器宽度,容器会根据项目的宽度进行等比缩放

  • column:主轴为垂直方向,起点在上沿。

    从上往下排。

  • column-reverse:主轴为垂直方向,起点在下沿。

    从下往上排。

2.flex-wrap

设置项目是否换行排列。

flex-wrap: nowrap | wrap | wrap-reverse;
  • nowrap(默认值):不换行。
  • wrap:换行,第一行在上方。
  • wrap-reverse:换行,第一行在下方。

3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap

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

4.justify-content

设置项目的水平对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

设置项目垂直方向对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch;
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6.align-content

当项目定义了横竖2根轴的时候生效,相当于justify-contentalign-items的简写。

Flex项目属性

a.order

定义项目的排列顺序,值越小越考前,默认为0。

order: <integer>;

b.flex-grow

定义项目的放大比例,默认为0(不放大),大于0则自动填充剩余区域,大于0的时候照数值大小的倍数填充相应区域。例如2个平级div,一个flex-grow:1,另一个flex-grow:2,则第一个div是第2个div的2倍宽度,且2个div共同填充满剩余宽度。如果数值都相等且大于0,那么久平分剩余区域。

flex-grow: <number>; 

c.flex-shrink

定义项目的缩小比例,默认为1,如果空间不足将自动缩小。

不能和flex-wrap共用,如果项目换行,那么缩小的计算方式将无法生效。

flex-shrink: <number>; 

d.flex-basis

定义项目主轴空间,相当于设置width,默认为auto。

flex-basis: <length> | auto;

e.flex

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

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

flex:auto => flex:1 1 auto;
flex:none =>flex:0 0 auto;
flex:1 => flex:1 1 0%;
当设置 flex:1时,如果子元素宽度的和大于了父元素的宽度,将自动缩小子元素,若果子元素宽度的和小于父元素宽度,则自动放大子元素。
所以如果遇到了定宽的子元素,一样要单独设置flex-shrink:0,否则它将随父元素改变而改变。

f.align-self

定义项目的对齐方式。可覆盖align-items。默认值:auto。

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

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐