弹性布局

2017-03-01  本文已影响0人  kabumie

简介

基础语法

概念

Flex容器

主轴和副轴

<div class="container">
    <div class="pink"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

当主轴为x轴时：


主轴为x轴的效果图主轴为x轴的效果图

当主轴为y轴时：


主轴为y轴的效果图主轴为y轴的效果图

即主轴方向决定了容器内元素的排列方向

容器属性

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

1. flex-direction

设置主轴方向

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

row(默认值)：主轴为x轴，起始位置为左


row效果图row效果图

row-reverse：主轴为x轴，起始位置为右


row-reverse效果图row-reverse效果图

column：主轴为y轴，起始位置为上


column效果图column效果图

column-reverse：主轴为y轴，起始位置为下


column-reverse效果图column-reverse效果图

2. flex-wrap

设置可换行属性，默认下容器内子元素会按照主轴方向排一行，不会换行，当总长度超过容器时子元素会被压缩，通过 flex-wrap 属性可设置换行模式

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

nowrap(默认值)：不换行，width设置为22%的6个子元素被压缩在一行


nowrap效果图nowrap效果图

wrap：换行，第一行从最上侧开始


wrap效果图wrap效果图

wrap-reverse：换行，第一行从最底部开始


wrap-reverse效果图wrap-reverse效果图

3. flex-flow

flex-direction 和 flex-wrap 的联写模式

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

4. justify-content

设置主轴方向的对其方式

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

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


justify-content效果图justify-content效果图

5. align-items

设置副轴方向对其方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
    ```
> flex-start：副轴的起点对齐
> flex-end：副轴的终点对齐
> center：副轴的中点对齐
> baseline: 项目的第一行文字的基线对齐
> stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度
![align-items效果图](https://kabumie.github.io/images/md_img/align-items.png)
*这里只演示baseline效果，其它类似于justify-content的效果*

#### 6. align-content
在开启换行模式后有换行时设置多行在副轴方向的对齐方式，如果主轴只有一行则该属性无效
```css
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值)：轴线占满整个交叉轴


align-content效果图align-content效果图

子元素属性

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

1. order (常用)

定义子元素排列顺序，值为无单位整数，默认值为0，值越小越靠近起始位置


order效果图order效果图

2. flex-grow

具体计算方式：假设 A, B, C, D, E 的宽度分别是 100, 120, 130, 100, 100，父级的宽度是660，父级宽减去子级的全部宽度，这样剩余空间就是110。例子中B, C定义了flex-grow，分别是1，2，那剩余空间分成3份，B1份，C2份，比例就是1：2，分配计算出来的值就是B :36.666666666666664, C：73.33333333333333。这个时候剩余空间就被计算出来了，相加后的结果就是B：156.66666666666666，C：203.33333333333331。
B的计算公式：120 + (110 / 3) * 1
C的计算公式: 130 + (110 / 3) * 2

3. flex-shrink

具体计算方式：假设 A, B, C 的宽度分别是155, 200, 50。父级宽度是300，计算超出的空间就是 -105，这样超出的 105px 就要被 A, B, C 消化掉，比例是2：1：1。
首先把每个项目的wdith值乘以 flex-shrink 值求积
A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。
然后再求和所有项目的乘积
(310 + 200 + 50) = 560
得到求占比之后还要乘以要腾出的空间
A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375
得到每一项要腾出的空间
A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625
这就是 A, B, C 按比例缩小后的大小

4. flex-basis

5. flex (常用)

6. align-self (常用)

应用实例

圣杯布局

html结构：

<body>
    <div class="container">
        <div class="header"></div>
        <div class="content">
            <div class="left"></div>
            <div class="middle"></div>
            <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>

css样式：

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header {
    flex: 1;
    background-color: gray;
}

.content {
    flex: 3;
    display: flex;
}

.content .left {
    background-color: red;
    flex: 0 0 200px;
}

.content .right {
    background-color: blue;
    flex: 0 0 200px;
}

.content .middle {
    background-color: whitesmoke;
    flex: 1;
}

.footer {
    flex: 1;
    background-color: gray;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }
    .content .left,
    .content .right,
    .content .middle {
        flex: 1;
    }
}

效果图：


圣杯布局效果图圣杯布局效果图

这里做了屏幕大小判断来适应移动端，在设置left和right宽度时使用的是 flex-basis，而不是 width，主要是因为在判断屏幕宽度小于768px时需要层叠掉left和right原本的固定宽度，让left和right可以自动填充整个屏宽，使用 flex-basis 可以在移动端样式中直接设置 flex: 1 使 flex-basis 变为 auto，如果使用 width，在需要去掉固定宽度时则比较麻烦
使用弹性布局不仅在宽度上达到自适应，在高度上也可以不受内容限制，直接填充满整个屏高

悬窗图片展示板

html：

<div class="container">
    ![](../img/mm.png)
    <div class="content">
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum impedit ut officiis, nobis consequuntur fuga ipsam deleniti dolorem consequatur voluptatum saepe nam magni, aperiam voluptatibus officia. Sed facilis totam quis laborum laudantium cupiditate cumque, fuga illum asperiores alias libero quia, placeat debitis explicabo sint, rerum, at reiciendis inventore dolore officia!</p>
    </div>
</div>

css：

* {
    margin: 0;
    padding: 0;
}

.container {
    width: 400px;
    padding: 15px;
    margin: 50px auto;
    background-color: whitesmoke;
    border-radius: 10px;
    display: flex;
}

.container img {
    margin-right: 15px;
    width: 80px;
    height: 80px;
}

.content {
    flex: 1;
}

.container p {
    font: 400 12px "微软雅黑";
}

效果图：


悬窗图片展示板效果图悬窗图片展示板效果图

结尾

作者很无耻的直接使用了阮一峰博客中的一些说明图片(因为自己做的一部分图片搞丢了，实在不想再做了T.T)；这里先谢阮大神，但是个人感觉阮一峰这篇博客对于一些属性的说明不太详细。
在 flex-grow 和 flex-shrink 的具体计算上直接使用了xiecg的文章中的例子，因为这个例子写的实在是太棒了。

会同步在 kabumie 的 github 空间上

上一篇 下一篇

猜你喜欢

热点阅读