Flex布局

前言、Flex布局

Flex布局可谓是移动端H5上最重要的布局，基本没有之一。一些常用的功能和基本功能在此只做罗列。具体的请参考阮一峰的Flex布局日志，已经介绍的十分完整。行文第二部分完全就是针对其博客的整理和引用，需要的请参考阮一峰的日志。

一、什么是Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，而Flex布局在我看来也颇为像弹簧，当施加外力外力的时候，弹簧的每个关节也都会整体撑开，合并的时候，就会整体的压缩。正如弹簧，每一节都有不同的弹性系数，那么当均匀受力的时候伸长的距离也会有所不同。这就是flex特性所带来的，后续篇幅将会说明flex(弹性系数) = flex-grow(拉伸系数) / flex-shrink(收缩系数)/flex-basis(基本长度，如果没有弹性的时候我特别有用)，而根据每一节弹簧的材料的不同，那么max-width(height)， min-width(height)也是一个限制，不然材料将会破裂。
任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}
行内元素也可以使用 Flex 布局。


.box{
  display: inline-flex;
}
Webkit 内核的浏览器，必须加上-webkit前缀。


.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、Flex布局基本属性

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

image.png

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

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

2.1 容器的基本属性

2.1.1 主轴的方向 flex-direction

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

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.1.2 flex-wrap 是否换行

默认是都排列在一条横线上，即nowrap。

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

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

2.1.3 flex-flow = flex-direction + flex-wrap 默认值为 row nowrap

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

2.1.4 justify-content属性定义了项目在主轴上的对齐方式

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

image.png

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

2.1.5 align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

image.png

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.1.6 align-content属性定义了多根轴线的对齐方式

如果项目只有一根轴线，该属性不起作用

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

image.png

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

2.2 项目的基本属性

2.2.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
  order: <integer>;
}

image.png

2.2.2 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {
  flex-grow: <number>; /* default 0 */
}

image.png

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

2.2.3 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

image.png

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。

2.2.4 flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

2.2.5 flex属性

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)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

2.2.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

image.png

三、Talk is cheap, show me the code

3.1 默认的flex布局的样式展示

<style>
    .flexBox{
        display: flex;
    }
    .flexItem{
        width: 90px;
        height: 90px;
        background: #55a532;
        margin-left: 20px;
        text-align: center;
        line-height: 90px;
    }
</style>
<body>
<div class="flexBox">
    <div class="flexItem">123</div>
    <div class="flexItem">123</div>
    <div class="flexItem">123</div>
    <div class="flexItem">123</div>
    <div class="flexItem">123</div>
    <div class="flexItem">123</div>
</div>

默认的flex布局压缩.gif

由此可见，其中flex默认的前情况下
flex-direction = row
flex-wrap = nowrap
flex-shink = 1
flex-grow = 0
flex-basis = auto

3.1 修改主轴的方向

修改了主轴的方向可以看到，row(行,排) 是默认而且是 =====》这样的顺序。 column(纵队) 顺序是从上而上，而第二部分中空间不够基本是针对窗口宽度的而言。纵向当高度不足的时候将会通过滚动条来搞定，如下面的gif图。

<style>
    .flexBox{
        display: flex;
        flex-direction: column;
    }
    .flexItem{
        width: 90px;
        height: 90px;
        background: #55a532;
        margin-left: 20px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 90px;
    }
</style>

column .gif

3.2 开始参差不齐的情况

<style>
    .flexBox{
        display: flex;
        flex-direction: row;
    }
    .flexItem{
        width: 90px;
        height: 90px;
        background: #55a532;
        margin-left: 20px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 90px;
    }
</style>
<body>
<div class="flexBox">
    <div class="flexItem" style="height:100px">123</div>
    <div class="flexItem" style="height:200px">123</div>
    <div class="flexItem" style="height:80px">123</div>
    <div class="flexItem" style="height:400px">123</div>
    <div class="flexItem" style="height:150px">123</div>
    <div class="flexItem" style="height:200px">123</div>
</div>

3.2默认参差不齐.png

3.2.1 稍做调整，调整

由此可见flex布局的空间不够，缩小当前的宽度的情况只是发生在nowrap也就是默认情况下。

flex-wrap: wrap
现象如图

3.2.1 可以换行的参差不齐 (1).gif

3.2.2 更改justify-content 属性

以下可见，当justify设置会作用域每一行的主轴

.flexBox{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

不换行的情况

换行的情况

3.2.3 align-items 的情况

.flexBox{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

不换行

换行以后

3.2.4 align-content属性调整

3.2.4.1 一根主轴的情况，当用父标签包围起来，高度的限制就体现出来了。

<style>
    .flexBox{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        align-content: flex-end;
        width: 100%;
        height: 100%;
    }
    .flexItem{
        width: 90px;
        height: 90px;
        background: #55a532;
        margin-left: 20px;
        margin-bottom: 20px;
        text-align: center;
        line-height: 50px;
    }
    #flexParents{
        width: 900px;
        height: 900px;
        background: aqua;
    }
</style>
<body>
<div id="flexParents">
    <div class="flexBox">
        <div class="flexItem" style="height:50px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
        <div class="flexItem" style="height:200px">123</div>
        <div class="flexItem" style="height:75px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
        <div class="flexItem" style="height:50px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
        <div class="flexItem" style="height:200px">123</div>
        <div class="flexItem" style="height:75px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
        <div class="flexItem" style="height:50px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
        <div class="flexItem" style="height:200px">123</div>
        <div class="flexItem" style="height:75px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:100px">123</div>
        <div class="flexItem" style="height:40px">123</div>
    </div>
</div>

image.png

3.3 深入理解弹簧模型

3.3.1 flex设置为1表示什么意思

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：
假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}

当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

当 flex取值为两个非负数字，则分别视为 flex-grow 和flex-shrink的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

3.3.2 关于flex-basis的默认取值过程

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis规定的范围取决于 box-sizing。这里主要讨论以下flex-basis的取值情况：

auto：首先检索该子元素的主尺寸，如果主尺寸不为auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

四、 Flex常用模型

4.1 如何将一个盒子均匀3等分

   .flexBox{
        display: flex;
        width: 100%;
        height: 200px;
        background: purple;
        justify-content: center;
    }
    .itemDiv{
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        background: blue;
        margin-right: 20px;
        text-align: center;
        color: white;
        line-height: 200px;
    }

  <h1>以下是需要 三 等分的界面</h1>
    <div class="flexBox">
        <div v-for="item in divList" :key=item.id class="itemDiv">{{item.name}}</div>
    </div>

演示如图

image.png

4.2 最常见的左右布局的结构

image.png

如上图，这就需要左边的布局维持不变，而右边的布局随着屏幕尺寸的不同和布局
笔者大概写了些，细微之处，只需要稍做调整即可。

.flexSection2{
        padding: 20px 50px 20px 50px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        background: antiquewhite;
        height: 300px;
    }
    .goods-image{
        width: 200px;
        height: 200px;
        flex: 0 0 200px;
        margin-right: 50px;
        background: #55a532;
    }
    .goods-content{
        flex: 1;
        background: lightseagreen;
        min-width: 300px;
    }
    .goods-margin{
        margin-bottom: 10px;
    }
    .cateSpan{
        padding: 5px 10px;
        background: yellow;
        border: solid 1px #dddddd;
        border-radius: 10px;
        margin-right: 20px;
        margin-bottom: 20px;
        white-space: nowrap;  /*强制span不换行*/
        display: inline-block;  /*将span当做块级元素对待*/
    }

<h1>2. 例子2常见的左对齐方式</h1>
    <div class="flexSection2">
        <!--左边图片部分-->
        <div class="goods-image">
        </div>
        <!--右边部分-->
        <div class="goods-content">
            <div class="content-name goods-margin">
                {{ goodDetail.name }}
            </div>
            <div class="content-price goods-margin">
                商品价格: {{ goodDetail.price }}元
            </div>
            <div class="content-catelist goods-margin">
                <span class="cateSpan" v-for="cateItem in goodDetail.catelist" :key="cateItem.id">{{ cateItem }}</span>
            </div>
        </div>
    </div>

4.3 熟悉类似网格的布局

image.png

需求是无论何种手机屏幕都必须是4个一列的方式网格排布
该图来至于京东，当然正常情况京东的实现是ul和li标签自己实现，flex的实现是有些缺陷，具体如下。
CSS部分

.gridTable{
        margin: 10px 20px;
        background: lightseagreen;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 810px;
    }
    .goodItem{
        background: green;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 24%;
        height: 200px;
        min-width: 200px;
        line-height: 200px;
        text-align: center;
        color: white;
        border: solid 1px yellowgreen;
        max-width: 25%;
    }

Html部分

 <h1>3. flex布局的类似网格布局</h1>
    <div class="gridTable">
        <div class="goodItem" v-for="goodItem in categories" :key="goodItem.id">{{ goodItem['sourceValue'] }}</div>
    </div>

4.4 动态效果图，以及源码地址

4.4.1 动图展示

4.2和4.2展示 (1).gif

4.3例子演示.gif

4.4.2 代码的github地址

源码地址

image.png

参考链接和书籍

Flex 布局教程：语法篇-阮一峰
 flex设置成1和auto有什么区别

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,088评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,715评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,361评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,099评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,987评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,063评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,486评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,175评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,440评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,518评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,305评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,190评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,550评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,152评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,451评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,637评论 2赞 335

Flex布局

前言、Flex布局

一、什么是Flex布局

二、Flex布局基本属性

2.1 容器的基本属性

2.1.1 主轴的方向 flex-direction

2.1.2 flex-wrap 是否换行

2.1.3 flex-flow = flex-direction + flex-wrap 默认值为 row nowrap

2.1.4 justify-content属性定义了项目在主轴上的对齐方式

2.1.5 align-items属性定义项目在交叉轴上如何对齐

2.1.6 align-content属性定义了多根轴线的对齐方式

2.2 项目的基本属性

2.2.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

2.2.2 flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

2.2.3 flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

2.2.4 flex-basis

2.2.5 flex属性

2.2.6 align-self属性

三、Talk is cheap, show me the code

3.1 默认的flex布局的样式展示

3.1 修改主轴的方向

3.2 开始参差不齐的情况

3.2.1 稍做调整，调整

3.2.2 更改justify-content 属性

3.2.3 align-items 的情况

3.2.4 align-content属性调整

3.2.4.1 一根主轴的情况，当用父标签包围起来，高度的限制就体现出来了。

3.3 深入理解弹簧模型

3.3.1 flex设置为1表示什么意思

3.3.2 关于flex-basis的默认取值过程

四、 Flex常用模型

4.1 如何将一个盒子均匀3等分

4.2 最常见的左右布局的结构

4.3 熟悉类似网格的布局

4.4 动态效果图，以及源码地址

4.4.1 动图展示

4.4.2 代码的github地址

参考链接和书籍

推荐阅读更多精彩内容