Flexbox初步学习

2017-02-20 本文已影响0人 _李杨

Flexbox简介

Flexbox Layout(Flexible Box)模块，W3C官方称为CSS弹性盒子布局，是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序，即使其子元素的尺寸是未知或者动态的情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。

Flexbox模型

Paste_Image.png

上图为flexbox的模型。对于一个flexbox，有以下几点基本点需要关注：

flex-container：flex容器。
flex-item：flex元素。需要注意的是，flex-item是相对flex-container的直接子元素，flex-item本身也可以成为其内部元素的flex-container。
main axis：主轴，默认为横向且从左到右。
cross axis：纵轴，默认为纵向且从上到下。
main size：flex-item在主轴上的尺寸。
cross size：flex-item在纵轴上的尺寸。

接下来将以代码演示的方式来初步学习flexbox。

Flexbox属性

Flex-container：
对于容器而言，首先我们要开启flexbox。
现在有这样一段HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>flex</title>
</head>
<body>
    <div class="box">
      <div class="box1">1</div>
      <div class="box1">2</div>
      <div class="box1">3</div>
      <div class="box1">4</div>
  </div>
</body>
</html>

接下来，我们来为box开启flexbox(为了易于表现，我们来加上一些样式）。

.box {
    background:lightgray;
    display:flex;
}
.box1 {
    width:100px;
    height:100px;
    border:1px solid red;
}

能够发现的是，当容器成为flexbox后，flex-item立刻呈现了一个样式，如图

Paste_Image.png
原本应该纵向块状排列的box1形成了类似float:left的显示效果，同时容器的高度也未塌陷，不免赞叹这个属性如此优雅。接下来我们来看对于一个flex-container，有怎样的属性可以使用。
1. flex-direction：
该属性决定flex-item在容器内的排列方向，有如下值：

.container{
        flex-direction:row|row-reverse|column|column-reverse;//默认值为row
}

    - row：flex-item按主轴从左向右排列。

row

- row-reverse：flex-item按主轴从右向左排列。

row-reverse

- column：flex-item按纵轴从上到下排列。

column
- column-reverse：flex-item按纵轴从上到下排列。

column-reverse
2. flex-wrap：

该属性决定flex-item在容器内的换行方式，有如下值：

.container {
          flex-wrap:nowrap|wrap|wrap-reverse;//no-wrap为默认值
}

下面都以flex-direction:row下演示，其他显示方向均类似。
- nowrap：不允许换行，flex-item会自适应缩小宽度。

nowrap
- wrap：允许换行，flex-item以设定的宽度排列，换行后从左下方继续排列。

wrap
- wrap-reverse：允许换行，flex-item以设定的宽度排列，换行后从左上方继续排列。

wrap-reverse
3. flex-flow：
该属性是flex-direction和flex-wrap的简写。

.contianer{
          flex-flow: <flex-direction> || <flex-wrap>;//默认值为row nowrap
}

4. justify-content：

该属性决定flex-item的在容器内横轴上的对齐方式，有如下值：

.container {
          justify-content:flex-start|flex-end|center|space-between|space-round;//默认值为flex-start
}

下面都以flex-flow:row wrap;演示。
- flex-start：以主轴开始方向对齐。

flex-start
- flex-end：以主轴结束方向对齐。（注意与row-reverse的区别）

flex-end
- center：以主轴中央对齐。

center
- space-around：各flex-item等间隔对齐，和容器接触的元素与容器距离为flex-item间的一半。简单来讲，flex-item的左右margin相等，且均分了容器主轴空间。

space-around
- space-between：以主轴两端对齐，flex-item间距相等。

space-between
关于这个属性，需要注意的是和flex-direction以及flex-wrap同时使用时会互相影响。
5. align-items：
类似于justify-content，该属性是flex-item在容器内纵轴上的对齐方式。

.container {
            align-items:flex-start|flex-end|center|baseline|stretch;//stretch为默认值
}

    - flex-start：以纵轴开始方向对齐。

flex-start

- flex-end：以纵轴结束方向对齐。

flex-end

- center：以纵轴居中对齐。

center
- baseline：以第一行文字基线对齐。

baseline
这里我们在2号盒子中使用p标签包裹了数字，由于p标签的自带属性，数字上方呈现了一定空间，这样能够更清楚的表现baseline的对齐方式。

- stretch：flex-item在纵轴方向填满整个容器。（当flex-item的高度固定时，该属性不生效）

stretch
这里我们取消了flex-item的固定高度，将容器的高度设定为400px。
6. align-content：
该属性设定当多行对齐时，所在行对应纵轴的对齐方式。

.container {
            align-content:flex-start|flex-end|center|stretch|space-between|space-around;//stretch为默认值
}

这里为了便于表示，我们给容器设定了固定宽高为500px。
- flex-start：以纵轴开始方向对齐。

flex-start

- flex-end：以纵轴结束方向对齐。

flex-end
- center：以纵轴居中对齐。

center
- stretch：纵轴方向填满整个容器。

stretch

这里我们取消了flex-item的高度以体现效果。
实际上，当我们为flex-item加上固定高度就会发现，该属性是将容器高度等分，将各行按等分线对齐。

stretch
- space-around：纵轴等间距对齐。

space-around
- space-between：纵轴两端对齐。

space-between

注：之前我们所讲到的主轴和纵轴，都是以默认情况，也就是flex-direction:row情况下讨论的。而当flex-direction:column或flex-direction:column-reverse时，此时主轴变为纵向，纵轴变为横向，所以其他属性的表现会相应变化。

flex-item：
1. order：
  该属性接收一个整数值，用来表示flex-item的先后顺序，可使用负数，默认值为0。

.item {
  order:<integer>;
}

order
这里我们为最后一个box添加了order:0，为其他box添加了order:1，结果时4号box移到第一位。

flex-grow：
该属性接收一个非负数作为比例系数，决定该flex-item的放大倍数，默认值为0，即不放大。

.item {
  flex-grow:<number>
}

flex-grow

该条属性最佳应用为让子元素等分容器空间，所以使用这条属性时不建议为flex-item添加固定宽度。

flex-shrink：
该属性接收一个非负数作为比例系数，决定改flex-item的缩小倍速，默认值为0，即不缩小。

.item {
  flex-shrink:<number>
}

flex-shrink
这里我们设定容器宽度为500px，flex-item宽度为300px，4号boxflex-shrink:0，其他均为flex-shrink:1，显而易见，4号box未缩小，宽度为300px，而其他盒子等比缩小，且大小相同。

flex-basis：
该属性决定该flex-item的主轴占据空间，可以为设定值或auto，默认值为auto，即flex-item本来尺寸。

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

flex-basis
这里我们没有为123号box添加宽度，4号boxflex-basis:100，可看到除了4号box宽度固定，其他box等分空间。

flex：
该属性为flex-grow、flex-shrink、flex-basis的简写，默认值为0 1 auto，后两值为可选属性。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值，auto(1 1 auto)和none(0 0 auto)。

align-self：
该属性用于设定某个flex-item对于纵轴的对齐方式，可覆盖容器上的align-item属性，默认值为auto，即继承容器的对齐方式。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

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

为了不再赘述，以align-self:flex-end举例：

flex-end
这里我们为容器添加了500px的高度，给4号box添加了align-self:flex-end，4号box便脱离了队伍到达了纵轴结束的位置。

Flexbox初步学习

Flexbox简介

Flexbox模型

Flexbox属性

猜你喜欢

热点阅读