<div class='flex-container'>
    <div class='flex-items'></div>
</div>

display: flex和dispaly: inline-flex的区别

• dispaly: flex，flex container是以block-level的形式存在的，相当于是一个块级元素
• dispaly: inline-flex，flex container是以inline-level的形式存在的，相当于是一个行内块元素
• display: flex和dispaly: inline-flex只影响flex-container，它们对flex-items的效果都是一样的
• flex-items设置display属性对自身的影响都会失效，但对其内容的影响依然存在
  • 父元素设置了display: flex，即使子元素设置了display：block或者display：inline的属性，子元素还是会表现的像个行内块元素一样，这就是父元素对其的影响使其display属性对自身的影响失效了；
  • 父子元素都设置了display: flex，那么子元素自身依然是行块级元素，并不会因为其开启了flex布局就变为块级元素，但是该子元素的内容依然会受到它flex布局的影响，各种flex特有的属性就会生效；

应用在flex-container上的属性

• flex-flow

  • flex-flow = flex-direction + flex-wrap，可以只写一个属性，也可以两个都写，甚至可以交换顺序
  • flex-flow: column wrap === flex-direction：column；flex-wrap：wrap
  • flex-flow: warp === flex-direction：row；flex-wrap：wrap只写一个属性值，另一个属性就取默认值

• flex-direction

  flex-direction用于改变主轴方向

  flex-items默认都是沿着主轴方向排列的，通过改变主轴的方向间接改变flex-items的排列方向

  属性值	main start（主轴的起始位置）	main end（主轴的结束位置）	主轴方向
  row（默认值）	左	右	→
  row-reverse	右	左	←
  column	上	下	↓
  column-reverse	下	上	↑

• flex-wrap

  flex-warp用于决定flex-items单行还是多行显示

  • nowrap（默认）：单行

    flex-container宽度500px，flex-items宽度100px，当有6个flex-items并不会换行，flex-items的宽度均会缩小，这也是弹性布局的由来。

  • wrap：多行，交叉轴方向为↓

    flex-container宽度500px，flex-items宽度100px，当有6个flex-items会换行，换行后的flex-items在下面（由交叉轴决定）

  • warp-reverse：多行，交叉轴方向为↑

    flex-container宽度500px，flex-items宽度100px，当有6个flex-items会换行，前五个会在最底下，因为交叉轴方向为↑，换行后的flex-items上面（由交叉轴决定）

  注意：换行后的元素并不一定紧挨着上行元素，因为align-content默认为stretch，而换行元素又设置了高度，不会被拉伸，但它们会被排列在要被拉伸的起始位置，中间的空间就是第一行元素原本要被拉伸到的长度

  

• justify-content

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

  • flex-start（默认）：与mian start对齐

  • flex-end：与mian end对齐

  • center：居中对齐

  • space-between

    flex items与mian start、mian end两端对齐

    flex items之间的距离相等

  • space-evenly

    flex items之间的距离相等

    flex items与main start、main end之间的距离等于flex items之间的距离

  • space-around

    flex-items之间的距离相等

    flex items与main start、main end之间的距离等于flex items之间的距离的一半

• align-items

  决定单行flex-items在交叉轴上的对齐方式

  主轴只要是横向的，无论flex-direction设置的是row还是row-reverse，其交叉轴都是从上指向下的；

  主轴只要是纵向的，无论flex-direction设置的是column还是column-reverse，其交叉轴都是从左指向右的；

  也就是说：主轴有四种方向，但是交叉轴只有两种方向

  • stretch（默认值）

    当flex items在交叉轴方向上的width或height（由交叉轴方向确定）为auto或没有设置时，会自动拉伸填充，当前flex-items会撑满父元素的width或height；否则，产生的效果就和设置为flex-start一样

  • flex-start：与cross start对齐

  • flex-end：与cross end对齐

  • center：居中对齐

  • baseline：与基准线对齐

    沿着flex-items内文字的底线对齐，当字体大小不一致时可以使用

  

• align-content

  决定了多行flex-items在交叉轴上的对齐方式，用法与justify-content类似，具有以下属性值

  • stretch（默认值）

    当flex items在交叉轴方向上的width或height（由交叉轴方向确定）为auto或没有设置时，会自动拉伸填充，交叉轴方向上的所有flex-items会共同撑满父元素的width或height，它们会均分width或height；否则，产生的效果就和设置为flex-start一样

    flex-container宽度为400px，flex-item宽度为100px

    

  • flex-start

  • flex-end

  • center

  • space-around

  • space-between

  • space-evenly

应用在flex-item上的css属性

• flex（flex-grow flex-shrink flex-basis的简写）

  单值语法: 值必须为以下其中之一:

  • 一个无单位并且>=0的数,它会被当作flex:n 1 0;
  • 一个有单位并且>=0的数: 它会被当作 flex: 1 1 n;
  • none，flex: 0 0 auto;既不放大也不缩小
  • auto，flex: 1 1 auto;会放大和缩小
  • initial，flex: 0 1 auto;不放大但会缩小

  双值语法: 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

  • 一个无单位数：它会被当作 <flex-shrink> 的值。
  • 一个有效的宽度值: 它会被当作 <flex-basis> 的值。

  三值语法:

  • 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
  • 第二个值必须为一个无单位数，并且它会被当作 <flex-shrink> 的值。
  • 第三个值必须为一个有效的宽度值， 并且它会被当作 <flex-basis> 的值。

• flex-grow

  决定flex-items分配剩余空间的相对比例

  可以设置任何非负数（正整数、正小数、0），默认值为0

  只有当flex container在主轴上有剩余的空间时，该属性才会生效，记剩余空间为remaining

  如果所有的flex items的flex-grow属性值总和sum超过1

  每个flex item扩展空间 =（remaining / sum) * flex-grow

  如果所有的flex items的flex-grow属性值总和sum不超过1

  每个flex item扩展空间 =remaining * flex-grow

  当设置了max-width时，怎么扩展都不会超过max-width

• flex-basis

  决定flex items在主轴方向上的base size

  • auto（默认值）
  • content：元素的内容大小
  • 具体的长度或百分比

  决定flex items最终base size因素的优先级为max-width/max-height/min-width/min-height > flex-basis > width/height > 内容本身的size

• flex-shrink

  决定flex items在主轴方向上的收缩规则

  可以设置任意非负数字（正小数、正整数、0），默认值是1

  当flex items在主轴方向上超过了flex container的size之后，flex-shrink属性才会生效

  注意：与flex-grow不同，计算每个flex item缩小的大小都是通过同一个公式来的，计算比例的方式也有所不同

  收缩比例 = flex-shrink * flex item的base size，base size就是flex item最开始的size

  记flex-items超出flex-container的size为overflow

  所有flex items 的收缩比例之和为sum

  每个flex item收缩的size为(overflow / sum) * flex-shrink

  flex items收缩后的最终size不能小于min-width/min-height

• order

  决定了flex items的排列顺序

  可以设置为任意整数（正整数、负整数、0），值越小就排在越前面

  默认值为0，当flex items的order一致时，则按照渲染的顺序排列

• align-self

  flex items可以通过align-self覆盖flex container设置的align-items

  默认值为auto：默认遵从flex container的align-items设置

  stretch、flex-start、flex-end、center、baseline，效果跟align-items一致，简单来说，就是align-items有什么属性，align-self就有哪些属性，当然auto除外