Flexbox使用

最近看了一个CSS3中的新属性：flex。它是一种不同于块和内联模型的新布局模型。它包括flex container和子元素flex items，利用属性的定义可以自由地控制其子元素的布局。
首先了解flexbox模型及其基本术语。
flexbox模型

  • 主轴、主轴方向(main axis |main dimension)：确定了伸缩容器的延伸方向。
  • 主轴起点、主轴终点(main-start |main-end)：伸缩项目的配置从容器的主轴起点边开始，往主轴终点边结束。
  • 主轴长度、主轴长度属性(main size |main size property)：伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度，伸缩项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。
  • 侧轴、侧轴方向(cross axis |cross dimension)：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
  • 侧轴起点、侧轴终点(cross-start |cross-end)：填满项目的伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
  • 侧轴长度、侧轴长度属性(cross size |cross size property)：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是”width”或”height”属性，由哪一个对着侧轴方向决定。

    flexbox使用

    为了熟悉flexbox的用法，现在首先构造出六个盒子
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
      <title>untitled</title>
      <link rel="stylesheet" type="text/css" href="css/test1.css">
    </head>
    <body>
    <ul class="wrap">
      <li class="box1">1</li>
      <li class="box2">2</li>
      <li class="box3">3</li>
      <li class="box4">4</li>
      <li class="box5">5</li>
      <li class="box6">6</li>
    </ul>
    </body>
    </html>

其样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.wrap{
    display: flex;
}
.box1,.box2,.box3,.box4,.box5,.box6{
    width: 100px;
    border: 2px solid #f00;
    font-size: 50px;
    list-style: none;
    margin: 10px;
    text-align: center;
}
.box1{
    height:200px;
}
.box2{
    height:100px;
}
.box3{
    height:150px;
}
.box4{
    height:200px;
}
.box5{
    height:220px;
}
.box6{
    height:150px;
}

定义出以下六个盒子，此时已经给wrap添加属性display:flex，设置成flex-container了

下面介绍各个属性下这些盒子的样式变化

  1. flex-direction(flex-container)
    用来定义主轴的位置和延伸方向
    1
    flex-direction: row | row-reverse | column | column-reverse
  • row:默认值
  • row-reverse:
  • column:
  • column-reverse:
  1. order(flex items)
    定义个各item出现的顺序，默认是按文档流出现的顺序排列
    如将box4设置成:
    1
    2
    3
    4
    .box4{
        height:200px;
        order: -1;
    }

则box4会排到第一个

  1. flex-wrap(flex container)
    定义了侧轴的位置和方向
    1
    flex-wrap: nowrap | wrap | wrap-reverse
  • nowrap：默认值，单行显示
  • wrap：
  • wrap-reverse:
  1. flex-flow(flex container)
    flex-direction和flex-wrap的合写
    1
    flex-flow: <‘flex-direction’> || <‘flex-wrap’>

flex-flow:row-reverse wrap-reverse;

  1. justify-content(flex container)
    这个是用来定义伸缩项目沿着主轴线的对齐方式。当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。
    1
    justify-content: flex-start | flex-end | center | space-between | space-around;

  1. align-content(flex container)
    主要用来调准伸缩行在伸缩容器里的对齐方式。类似于伸缩项目在主轴上使用“justify-content”一样。
  2. align-items(flex container)
    主要用于子元素高度不一致时，各子元素的对齐方式定义
    1
    align-items: flex-start | flex-end | center | baseline | stretch
  • flex-start：伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
  • flex-end：伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
  • center：伸缩项目的外边距盒在该行的侧轴上居中放置。
  • baseline：伸缩项目根据他们的基线对齐。
  • stretch（默认值）：伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
  1. **align-self(flex items)
    用于设置子元素的对齐方式
    1
    align-self: auto | flex-start | flex-end | center | baseline | stretch;

例如对wrap设置

1
align-items:flex-strat

而对box3设置

1
align-self:flex-end

  1. flex-grow(flex items)
    定义子元素的伸缩能力
    1
    flex-grow:<number>/*default 0*/


以上就是flexbox的常见用法，参考链接：Flexbox详解