弹性布局

发表于 | 分类于 | 阅读次数:

布局的方案有很多，目前最常见的要数 Flex 布局了

Flex 布局

写弹性布局的基本步骤如下

指定 flex 容器

首先我们要指定一个元素为 flex 容器

1
2
3
4
5

.box {
    display:flex;
    display:-webkit-flex;/* Safari  */
}

设置 flex 布局之后，子元素的 float、clear、vertical-align 都将失效

设置容器的属性

主要有如下六个属性

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

flex-direction

1
2
3
4
row（默认值）：水平方向排列，从左边开始排列。
row-reverse：水平方向排列，从右开始排列。
column：垂直方向排列，从上往下排。
column-reverse：垂直方向排列，从上往下排。

flex-wrap

1
2
3
nowrap（默认值）:不换行
wrap：换行，第一行在最上面
wrap-reverse：换行，第一行在最下面

flex-flow

就是前flex-direction 和 flex-wrap的简写

1
flex-flow:flex-direction flex-wrap;

justify-content

定义水平对齐方式对齐方式

1
2
3
4
5
6

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，子元素之间的间隔都相等。
space-around：每个子元素两侧的间隔相等。所以，子元素之间的间隔比子元素与边框的间隔大一倍。

align-items

1
2
3
4
5
flex-start：上对齐。
flex-end：下对齐。
center：居中对齐。
baseline: 子元素的第一行文字的基线对齐。
stretch（默认值）：如果子元素未设置高度或设为auto，将占满整个容器的高度。

居中对齐实现

在面试中我们经常会被问道如何实现一个居中对齐，有了上面的知识，我们就可以很容易的实现一个居中对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    .box {
        display: flex;
        align-items:center;
        justify-content: center;
        height: 100%;
    }
    .center{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<div class="box">
    <div class="center"></div>
</div>

设置子元素的属性

order

排列的时候，order的值越小，排列越靠前，默认为 0 

1
order:1;

flex-grow

此属性主要用于当空间未被占满的时候。

默认为0，此时空间未被占满子元素会被放大。

如果设置了值，比如说

1
2
3
4
5
6
.children1{
    flex-grow:1;
}
.children2{
    flex-grow:2;
}

那么 children2占据 剩余空间 比children1多一倍

flex-shrink

主要用于当空间不足的时候。

默认为1，即如果空间不足，改子元素将缩小

如果设置了此值

1
2
3
4
5
6
.children1{
    flex-shrink:1;
}
.children2{
    flex-shrink:0;
}

此时，如果空间不足，chilrend2 不会被缩小，children1 都会被等比例缩小

align-self

可以单独设置子元素的对齐方式，会覆盖掉父有元素的align-items，
取值同 align-items