flex 弹性布局学习 - 一棵菜菜的博客

说明

描述：近两天在熟悉小程序项目的过程中，发现项目里布局大部分采用了flex布局法。之前有了解，但我没有实际使用过，所以我花时间学习了下flex，并总结成下文，方便自己随时查阅回顾。

强烈推荐文章：阮一峰的《Flex 布局教程：语法篇》

什么是Flex?

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

webkit 内核的浏览器，必须加上-webkit前缀。

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

注意：上面两行样式代码display顺序不能反，否则google下会无效

基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

以下6个属性设置在容器上

flex-direction 主轴的方向（即项目的排列方向）(row | row-reverse | column | column-reverse)
flex-wrap 换行方式 (nowrap | wrap | wrap-reverse(换行，第一行在下方))
flex-flow 值<flex-direction> || <flex-wrap>;默认值为"row nowrap"。
justify-content 定义了项目在主轴上的对齐方式
(flex-start | flex-end | center | space-between | space-around)
align-items 定义项目在交叉轴上的对齐方式。
(flex-start | flex-end | center | baseline（文字基线对齐） | stretch（高度占满整个容器的高度）)
align-content 定义了多根轴线（在交叉轴上？）的对齐方式
(flex-start | flex-end | center | space-between | space-around | stretch)

wrap 美 [ræp]

项目的属性

以下6个属性设置在项目上。

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
(如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。)
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
(如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。)
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为auto，即项目的本来大小
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。用于设置或检索弹性盒模型对象的 子元素 如何分配空间。有两个快捷值auto、none。
- flex 默认值为 0 1 auto。
- flex:auto; 代表 1 1 auto，即自动伸缩。
- flex:none; 代表 0 0 auto，即不伸不缩。
- flex:1; 由于flex后两个属性可选，所以flex:1等同于flex-grow:1、flex:1 1 0。让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容（点击查看例子）【牢记】
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

flex

flex 是 flex-grow flex-shrink flex-basis 的缩写，后两个可以省略。

使用

我发现flex在垂直居中的使用上非常普遍。所以我测试编写了如下可实施的代码：

法1

  <style>
        .parent {
            display: -webkit-flex;
            display: flex;
            height: 300px;
            background: yellow;
        }

        .child {
            width: 100px;
            height: 100px;
            margin: auto;
            background: pink;
        }
    </style>

<div class='parent'>
    <div class='child'></div>
</div>

法2 【推荐】

 <style>
        body {
            background: #d4d4d4;
        }

        .box {
            margin: 10px;
            background-color: white;
            display: -webkit-flex; /* Safari */
            display: flex;
            height: 200px
        }

        .box-item {
            width: 100px;
            height: 100px;
            text-align: center;
            vertical-align: middle;
            line-height: 100px;
            margin: 2px;
            background: #ffd200;
            color: white;
            font-size: 30px;
        }

        .box-1 {
            /*flex-direction: row; (默认row)*/
            /*flex-wrap:nowrap;(默认nowrap不换行)*/
            flex-flow: row nowrap;

            justify-content: center;
            /*justify-content item在主轴上的对齐方式:flex-start flex-end center space-between space-around*/
            align-items: center
        }

        .box-2 {
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: stretch;
            /*align-items item在交叉轴上的对齐方式:flex-start flex-end center baseline*/
        }

        .box-2 .box-item {
            /*盒子设置align-items: stretch时：如果item未设置高度或设为auto，将占满整个容器的高度*/
            height: auto
        }

        .box-3 {
            height: 400px;
            flex-flow: row wrap;
            align-content: flex-end;
            /* align-content 多根轴时item在交叉轴上的对齐方式（一根轴时无效）:flex-start flex-end center space-between space-around stretch*/
        }

        .box-4 .box-item {
            flex-grow: 1;
            /*flex-grow:放大，默认值为0（当空间有剩余时，0:不放大）*/
            flex-shrink: 1
            /*flex-shrink:缩小，默认值为1（当空间不足时，等比缩小(因为flex-wrap的默认值为nowrap(不换行，即缩小))）；0:不缩小*/
        }

        .box-4 .item-2 {
            width: 300px;
            flex-grow: 2;
            flex-shrink: 0
        }

    </style>

<!--推荐：垂直居中-->
<div class="box box-1">
    <div class="box-item">1</div>
</div>

<div class="box box-2">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
</div>

<!--DOM排序-->
<div class="box box-3">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item" style="order:3">4</div>
    <div class="box-item" style="order:2">5</div>
    <div class="box-item">6</div>
    <div class="box-item">7</div>
    <div class="box-item" style="order:-1">8</div>
</div>

<div class="box box-4">
    <div class="box-item">1</div>
    <div class="box-item item-2">2</div>
    <div class="box-item">3</div>
</div>

效果图

说明