flex 布局相关知识

发表于: 2016-03-05分类于:CSS

CSS 中的 Flex 布局

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

flex容器存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

容器的属性

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

    flex-direction

决定了主轴的方向,可选值:

  • row
  • row-reverse
  • column
  • column-reverse

    flex-wrap

当容器内的元素的宽度或者高度之和大于容器的宽度或高度的时候,这个属性决定容器类元素是否折行,以及如何折行。

有三个值可选:

  • nowrap:不折行,容器内的弹性子元素的宽度或者高度会被压缩,以至于容器能够容纳所有子元素
  • wrap:折行,放不下的元素折行在下面(flex-direction:row)或者右面(flex-direction:column)显示
  • wrap-reverse:折行,放不下的元素折行在上面(flex-direction:row)或者左面(flex-direction:column)显示

    flex-flow

这个属性是 flex-direction 和 flex-flow 的简写形式。写法形如:flex-flow:row wrap

justify-content

定义了子元素在主轴上的对齐方式,可选值为:

  • flex-start
  • flex-end
  • center
  • space-between:两端对其
  • space-around:每个项目两侧具有同样的间隔

    align-items

定义了子元素在交叉轴上的对齐方式,可选值为:

  • flex-start
  • flex-end
  • center
  • baseline:以文字的基线对齐
  • stretch:如果元素的高度或者宽度为 auto 将占满整个容器的高度(flex-direction:row)或者宽度(flex-direction:column)

    align-content

定义了多根轴线的对齐方式,可选值为:

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • stretch

当存在多根轴线的时候,这个属性才生效,且设置了这个属性以后,align-items 将不起作用

项目的属性

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

    order

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

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

如果一个弹性元素其宽度为200px,其中包含两个元素,两个元素的宽度都是 50px 且 flex-grow 都是 1,那么这两个元素将平分余下的 100px ,所以结果是两个元素的实际宽度都是 100px。

flex-shrink

属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

如果一个弹性元素其宽度为200px,其中包含两个元素,两个元素的宽度都是 200px 且 flex-shrink 都是 1。因为两个元素一共超出了父元素 200px,所以这两个元素将缩小 100px ,所以结果是两个元素的实际宽度都是 100px。

如果其中一个元素的 flex-shrink 是 0 另外一个是 1,那么 flex-shrink 为 1 的元素将独自减小 200px。

flex-basis

取值同 width 属性,可以是具体的像素值,也可以是百分比,还可以是 auto ,默认是 auto。用于定义元素占据主轴的宽度。width 也可以描述元素的宽度,但如果同时设置了 width 和 flex-basis 那么 flex-basis 会覆盖 width 属性。

flex

flex-grow, flex-shrink 和 flex-basis 的简写形式,写法形如:flex:1 1 auto

align-self

允许单个项目与其他项目有不同的对其方式,可以覆盖 align-items 属性。可选值如下:

  • auto
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

React Native 中的 Flex 布局

在 RN 中 flex 布局和 CSS 中的 flex 相似,但也存在很多不同点,下面针对 RN 中 flex 布局进行讨论,讲解如何在 RN 中使用 flex 布局。

RN 并未完全支持标准 Flex 中的所有属性。标准的 Flex 支持:

容器的属性:

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

子元素的属性:

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

而 RN 只支持下列属性:

flexDirection

flexDirection 描述了主轴的方向,可选值为:

flexDirection: 'row' | 'row-reverse' | 'column' | 'column-reverse'

默认值为:'column'

justifyContent

justifyContent 描述了子元素如何在主轴上排列,可选值为:

justifyContent: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around'

默认值为:'flex-start'

flexWrap

flexWrap 描述了当主轴上空间不够时候,子元素是否折行,可选值为:

flexWrap: 'wrap' | 'nowrap'

默认值为:'wrap'

alignItems

alignItems 描述了子元素在交叉轴上如何显示,该属性只在子元素没有发生折行的时候起作用,这和 CSS 中是一样的。对于在交叉轴上有多行元素的情况,在 CSS 中可以使用 align-content 来定位,但在 RN 中没有该属性。

alignItems 可选值为:

alignItems: 'flex-start' | 'flex-end' | 'center' | 'stretch'

默认值为:'stretch' ,这有别于 CSS 中默认值为 flex-start

alignSelf

alignSelf 属性使用在子元素上,子元素用来控制自己在交叉轴上的定位,可选值为:

alignSelf: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch'

默认值为:auto ,即和父组件的 alignItems 的值保持一致。

flex

flex 属性用来描述子组件在主轴上占据的宽度,flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写属性。

在 CSS 中 flex: 1 等同于:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

而在 RN 中该属性的值只能设置为一个数值,如 flex:1 。而且在 RN 中没有 flex-shrinkflex-basis 属性,这意味着在 RN 中你可以认为 flex-shrink 始终为 1 ,而 flex-basis 始终为 0,且 flex 的值就是 flex-grow 的取值。

当 flex 取值为正值得时候,该组件拥有弹性盒子的属性。当取值为 0 的时候,其大小取决于 width 和 height,当取值为负值得时候,组件的大小依然取决于 width 和 height 但是如果没有足够的空间,那么该组件会缩小至其 min-width 和 min-height 所描述的大小。