两种布局方式

浮动布局

浮动布局最初是用来做图文环绕。
浮动布局的优势：
兼容性比弹性布局好，特别是对早期ie浏览器兼容
浮动布局的缺点：
1.很繁琐2高度坍塌问题

弹性布局

也称flex布局，flexible布局。目前web开发使用最多的布局方式。
使用范围：移动端使用最多，pc端使用也越来越多。
弹性布局的缺点：
不适配ie6-9 其他浏览器基本适配。

弹性布局的两个重要概念

flex-container

描述：开启了flex布局的元素。
开启方式：display：flex/inline-flex
flex和inline-flex的区别：
flex会把当前元素当成块级元素（block）
inline-flex会把元素当成行内块元素（inline-block）。

flex-items

flex-container元素的直接子元素统称flex-items。

flex布局的布局模型

main axis:主轴，默认是从左到右。可通过设置改变指向。
cross axis：交叉轴，默认从上到下，可跟随主轴方向改变而改变。
main start：主轴开启位置。
main end: 主轴结束位置。
main size：主轴长度，从main start到main end的距离。
cross start：交叉轴开始位置。
cross end：交叉轴结束位置。
cross size: 交叉轴长度，从cross start到cross end的距离。

flex布局应用在flex-container上的属性

flex-direction

**首先，flex-items元素默认会沿着主轴从main-start到main-end排列。 **
example：
代码：

<div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
</div>

效果：在flex-container中的子元素排布是完全受flex-container控制的。比如说本身div是一个块级元素不能在一行显示，但是在flex-container中，这种影响是被屏蔽了的，不起作用的。实际上，flex-items已经不区分行内元素和块级元素了，他们只受flex-container的摆布，并且他们都是可以有宽高大小的。
我们再来分析flex-direction是干啥的？

flex-direction的作用

改变主轴的方向。（main start main end 以及cross axis也会随之而变。）

row（默认值）主轴方向从右到左。
row-reverse 将主轴方向反转，从右到左。
column 主轴方向从上到下。
column-reverse 主轴方向从下往上。

justify-content

justify-content的作用

现在已经知道flex-items会在main-axis上排布。并且方向是从main-start向main-end进行排列。而**justify-content就决定了flex-items的对齐方式。 **

justify-content的取值

flex-start （默认值）和main-start对齐。
flex-end 和main-end对齐。
center 居中对齐。
space-between 两端和main-start和main-end对齐。每个元素之间的空隙相等。
space-evenly 和space-between的差别就是两端也有间隙。这些间隙都是等分的。天以
space-around 和space-evenly的差别是两端有间隙。但是这两端的间隙应该是中间间隙的1/2。

align-items

align-items的作用

决定flex-items在侧轴上的对齐方式。

align-items的取值

normal（默认值）
同stretch
stretch
如果flex-items在cross axis上的size是auto的话，那么他就自动拉伸到能填充flex-container的位置。所以没有设置大小的情况下，flex-items是会被拉伸的。
flex-start
和cross start对齐。
flex-end
和cross end对齐。
center
flex-items的中点和flex-container的中点对齐。
base-line
基线对齐。对齐的是，flex-items内第一行文本的基线。 注意，align-items的使用范围是当flex-items只有一行的情况下使用。

flex-wrap

flex-wrap的作用

决定flex-items是否只有一行.

flex-wrap的取值

nowrap
默认值，单行，如果出现flex-items的size大于main size的情况怎么办，以前是会另外再开启一行，但是对于flex布局来说他不会。他会压缩尺寸，即使你的尺寸规定好了，他还是会等比例压缩，直到size和main size相等。
wrap
多行
wrap-reverse
多行，和wrap的区别是cross-end 和cross-start对调

align-content

align-content的作用

决定flex-items在交叉轴上的排布方式，这是针对flex-items为多行的时候才生效的，单行不生效。

align-content的值

stretch
默认值，元素平分cross size的大小，如果没有设置元素大小，就会被拉伸，否则就是间距
flex-start
和cross start对齐。和justify-content类似。
flex-end
和cross end 对齐，和justify-content类似。
center
居中。和justify-content类似。
space-around
和justify-content类似。
space-evenly
和justify-content类似。
space-between
和justify-content类似。

flex-flow

flex-flow描述

这是一个复写属性，包含flex-direction和flex-wrap
顺序是任意的，而且可以省略任意一个。

flex-item中的属性

order

描述

flex-item默认情况是按照我们写的顺序来排布的，如何改变他们的顺序呢?加上order属性，order越小，越在前面，默认的order为0。order取值范围为任意整数。（正数，负数，0）

align-self

描述

这个属性用来搞特殊，他是用来覆盖父类元素中设置的align-items.

取值

auto（默认值）
遵循flex-container中的align-items值
stretch
flex-start
flex-end
center
baseline
以上效果和align-items一致。

flex-grow

作用：

分配主轴上剩余空间.

取值

默认是0，取值范围是0，正小数，正整数。

规则

当在主轴上有多余的size时，可以通过flex-grow分配剩余的空间。

当一行的flex-grow总和sum大于1的时候，这时候会将剩余的空间按照特定比例分完：特定的比例为flex-grow-a/sum,flex-grow-b/sum,flex-grow-c/sum....
当一行的flex-grow总和小于等于1的时候，这时候每个flex-item分得的数量为各自的flex-grow乘以多余的size，可能会出现分不完的size，则以留白的方式呈现.
注意点：如果flex-item对width/height有限制:max-height/max-width,那么最后增加后的size不能超过他们。

flex-shrink

描述

决定了flex-item在主轴上如何压缩。只有在flex-item的size和大于mainsize的时候才会生效。（显然就是单行。）

取值

0，正小数，正整数，默认值是1（默认情况是每个元素压缩相同大小）

规则

flex-shrink总和sum大于1的时候，这时候会按照特定比例压缩：特定的比例为flex-shrink-a/sum,flex-shrink-b/sum,flex-shrink-c/sum....
flex-shrink总和小于1的时候，每个元素收缩的size应该等于flex-shrink* 要收缩的长度，这样会导致收缩不完，这时会出现溢出的请况

flex-basis

作用

决定这个flex-item在主轴上的size

取值

auto（默认值）
那么就是元素默认的宽度/高度决定size
具体数值（100px）

决定flex-item最终size的优先级

max-height/max-width/min-height/min-width
flex-basis
设置的width/height
内容撑开的size

flex

这是一个复合属性。顺序依次为flex-grow/flex-shrink/flex-basis 可以是一个值，两个值，三个值

一个值的时候，这个值无单位，就是flex-grow，还有可能就是关键字：none/auto/initial
两个值的时候，第一个值一定无单位，为flex-grow ,第二个值无单位则是flex-shrink，有单位则是flex-basis
三个值的时候，第一个是flex-grow无单位，第二个是flex-shrink无单位，第三个是flex-basis有单位

认识flex布局