flexbox布局

on flexbox

使用react-native开发，必须先学习flexbox布局。

flexbox是css3的一种新的布局模式，是一种替代float的方案。float只能让boxes水平放置，flexbox可以控制boxes对齐、方向、顺序和尺寸。

如下图（来源于网络）：

flexbox的基本属性：

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • order
  • align-self
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex

flexbox创建

创建flexbox容器：

.flex-container{
    display:flex;
    /* 或者 */ 
    display:inline-flex;
}

display:flex;创建块级flex容器，display:inline-flex;创建内联级flex容器。

Flex Axes

与块、内联（基于块、内联的流动方向）布局不同，flex布局基于flex directions。

flex directions是基于axes(轴)的概念，决定了flex item的方向。

如下图（来源于网络）：

flex items在容器内，基于main axis或者cross axis布局。

flexbox基本属性

flex-direction

此属性表示，通过设置flex容器的主轴方向来指定flex items在flex容器中的布局方式。可以分布在两个方向上，如水平排列和垂直排列。

值：

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

row表示，items被从左至右依次堆放。

row-reverse表示，items被从右至左依次堆放。

column表示，items从上至下依次堆放在一列中。

column-reverse表示，items从下至上依次堆放在一列中。

默认值：row

如下图：

flex-wrap

该属性可以控制flex容器的items是以单行还是多行排列，以及新行的堆放方向。

值：

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

flex显示在一行中，默认星狂下，items会放大缩小以适应flex容器的宽度。

如：

使用flex-wrap可以使items显示在多行。默认值nowrap单行。如：

flex-flow

此属性是flex-direction和flex-wrap的简写。

值格式：

flex-flow: <'flex-direction'> <'flex-wrap'>

默认值row nowrap

如：

.flex-container{
    flex-flow: row nowrap;
}

justify-content

该属性表示，沿flex容器当前的主轴对齐flex项目。

值：

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

flex-start - items左对齐

flex-end - items右对齐

center - items在flex容器的中心对齐

space-between - items以相等的间距显示，两边对齐（第一个和最后一个分别与flex容器的左右两边缘对齐）

space-around - items周围以相等的间距显示，第一个和最后一个item也是如此

如下图：

align-items

该属性与justify-content像是，在不是在主轴(main axis)对齐，而是在cross-axis中对齐。

值：

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

flex-start - flex items集中在cross-start处。

flex-end - flex items集中在cross-end处。

center - flex items集中在cross-axis轴的中心（类似垂直居中）。

baseline - flex items以其基线对齐的方式对齐。

stretch - 默认值。flex items从cross-start延伸到cross-end。

如下图：

align-content

当cross-axis轴有额外空间时，该属性设置垂直对齐方式，与justify-content类似。

值：

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

flex-start - 集中在cross-start处依次堆放

flex-end - 集中在cross-end处依次堆放

center - 集中在cross-axis处堆放（垂直居中）

space-between - items以相等的间距显示，第一行和最后一行与flex容器边缘对齐

space-around - items(包括周围)每一排以相等的间距显示

stretch - 默认值。拉伸占据剩余空间（垂直扩散）。如果剩余空间是负数，则该值与flex-start相同。

如下图：

flexbox item属性

order

该属性控制flex容器的item显示在flex容器内的顺序。默认晴空下，按照添加的顺序排列。

值：

order: <integer>

如下图所示：

flex-grow

该属性指定flex增长系数，在确定flex容器有足够的可用空间时，某item相对于容器内的其他items将要增长（chang）的倍数。

值：

flex-grow: <number>

如果所有items具有相同的值，如下图:

如果第二个item相对其他items值大，则：

默认值：0

注意：负数无效

flex-shrink

该属性设置flex items收缩比例。初始值为1，默认情况下不收缩，负数无效，0不缩小。

如果所有的flex items尺寸之和大于flexbox容器的尺寸，则可以指定要缩小的item。之和超过容器尺寸的部分是负空间，使用该属性，可以对某item分配这个负空间。

值：

flex-shrink: <number>

如下图：

flex-shrink属性通常与flex-basis和flex-grow一起使用。

flex-basis

该属性值与width（height）属性相同，并指定flex item初始的大小，然后根据flex条件分配可用空间。

值：

flex-basis: auto | <'width'>

如下图：

默认值：0

flex

该属性是flex-grow、flex-shrink和flex-basis属性的速记简写。

值：

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

flex的默认值是：0 1 auto;

当flex-grow被省略时，默认为1。flex-shrink被省略时，默认为1。flex-basis被省略时，默认为0。

  • flex:0 auto;/flex:initial; - 相当于flex:0 1 auto;。基于width/height属性确定item大小。
  • flex: auto; - 相当于flex:1 1 auto;。剩余空间可以被平均非配给该属性的item。
  • flex: none; - 相当于flex:0 0 auto;。不允许缩小。
  • **flex：** - 正整数。相当于`flex： 1 0%; ` 。flex basis设置为0.

align-self

该属性允许align-items覆盖各个flex items默认的对齐方式。

值：

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

如下图所示：

例子

垂直水平居中

html:

<div class="container">
  <div class="element">
    垂直水平居中
  </div>
</div>

css:

.container{
    display:flex;
    align-items:center;
    justify-content:center;
    
    max-width: 800px;
    margin: 3em auto;
    background-color: white;
    height: 500px;
    border: 10px solid #594255;
    
    .element {
      background-color: #594255;
      color: white;
      width: 250px;
      padding: 20px;
    }
}

效果：

等高列

html:

<header>header</header>
<div class="container">
    <section class="main">section</section>
    <aside class="sidebar">aside</aside>
</div>
<footer>footer</footer>

css:

header,
footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #ccc;
}

section,
aside {
  background-color: #594255;
  color: #eee;
  padding: 3em 1.5em;
  margin: 1% 0;
}

section {
  -webkit-flex: 2 1 500px;
  -webkit-box-flex: 2;
  -ms-flex: 2 1 500px;
  flex: 2 1 500px;
  margin-right: 1%;
}

aside {
  -webkit-flex: 1 2 250px;
  -webkit-box-flex: 1;
  -ms-flex: 1 2 250px;
  flex: 1 2 250px;
}

.container {
  -webkit-display: -webkit-box;
  -webkit-display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}

效果：

以上，等等！

注意

  • 所有的column-*属性都对flex容器没有影响。
  • ::first-line和::first-letter伪元素不适用于flex容器。