8

在flex容器中默认存在两条轴,水平主轴和垂直的交叉轴,这是默认设置,当然可以通过修改相关属性使垂直方向变为主轴,水平方向变为交叉轴,在容器中,每个单元块称为flex item,每个flex item占据主轴空间为main size,占据交叉轴空间为cross size。

Flex容器

首先实现flex布局需要先指定一个容器,任何一个容器都可以被置顶为flex布局,这样容器内的元素就可以使用flex来进行布局。

.container {
    display: flex | inline-flex;
}

flex生成一个块状的flex容器盒子,inline-flex生成一个行内flex容器盒子,以下六种属性可以设置在容器上:

  1. flex-direction
  2. flex-wrap
  3. flex-flow
  4. justify-content
  5. align-items
  6. align-content

flex-direction

.container {
    display:flex;
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction决定了主轴的方向,默认值是row。

row:主轴方向为水平方向,起点在左端;
row-reverse:主轴方向为水平方向,起点在右端
column:主轴方向为竖直方向,起点在上端
column:主轴方向为竖直方向,起点在下端

flex-wrap

.container {
    display:flex;
    flex-wrap:nowrap | warp | wrap-reverse;
}

flex-wrap决定容器内项目是否可换行,默认值nowrap。

nowrap:不换行,项目尺寸会随之调整
wrap:超出换行,且第一行在上方
wrap-reverse:超出换行,且第一行在下方

flex-flow

.container {
    display:flex;
    flex-flow:<flex-direction> || <flex-wrap>;
}

flex-flow是flex-direction和flex-wrap的简写,其默认值为row nowrap

justify-content

.container {
    display:flex;
    justify-content:flex-start | flex-end | center | space-between | space-around;
}

justify-content定义了项目在主轴上的对齐方式,默认值为flex-start

flex-start:左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,把剩余空间等分成间隙
space-around:每个项目两侧的间隔相等

align-items

.container {
    display:flex;
    align-items:flex-start | flex-end | center | baseline | stretch;
}

align-items定义了项目在交叉轴上的对齐方式,默认值为stretch

stretch:如果项目没有设置高度或者为auto,将占满整个容器的高度
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:中点对齐
baseline:项目的第一行文字的基线对齐

align-content

.container {
    display:flex;
    align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content:定义了多根轴线的对齐方式,如果项目只有一个轴线,那么该属性将不起作用。比如flex-wrap:nowrap;容器只有一根轴线,align-content就不起作用。默认值为stretch。当存在多条轴线时,多条轴线在垂直方向上的布局。

flex项目

有以下6中定义在item上的属性:

  1. order
  2. flex-basis
  3. flex-grow
  4. flex-shrink
  5. flex
  6. align-self

order

.item {
    order:<number>;
}

order定义项目在容器中的排列顺序,数值越小排列越靠前,默认值为0。

flex-basis

.item {
    flex-basis:<length> | auto;
}

flex-basis定义了在分配多余空间之前,项目占据主轴空间,浏览器根据这个属性,计算主轴是否有多余空间,默认值为auto,即项目本身的宽高。flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果。

flex-grow

.item {
    flex-grow:<number>;
}

flex-grow定义项目的放大比例,默认值为0,即若果存在剩余空间,也不放大。当所有项目的flex-grow属性值为1,则它们将等分剩余空间,如果一个项目flex-grow为2,其他为1,则前者占据的剩余空间将比其他项多一倍。如果所有项flex-basis的值排列完后发现空间不够,且flex-wrap:nowrap时,此时flex-grow则不起作用。

flex-shrink

.item {
    flex-shrink:<number>;
}

flex-shrink定义项目的缩小比例,默认值为1,若空间不够,且所有项的值为1,则所有项等比例缩小,如果一项flex-shrink属性为0,其他项都为1,则前者不缩小。

flex

.item {
    flex:auto | none | <flex-grow> | <flex-shrink> | <flex-basis>;
}

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。

auto:三个属性的值为 1 1 auto
none:三个属性的值为 0 0 auto

align-self

.item {
    align-self:auto | flex-start | flex-end | center | baseline | stretch;
}

algn-self允许单个项目有与其他项目不一样的对齐方式,单个项目的algn-self会覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性。


熟悉的陌生人
330 声望17 粉丝

如果我有一本书...