flex布局（完结）

---

flex布局

一·认识flex布局

1·开启flex布局的元素叫做flex container
2·flex container里的直接子元素叫做flex.item
3·开启display属性设置为flex以块级元素的形式存在
开启display属性为inline-flex以行内元素的形式存在

二·flex布局模型

三:felx的相关属性

（一）·应用在flex container上的CSS属性

flex-items默认是沿着main axis（主轴）从main-start开始往main-end方向排布的

1· flex-direction[主轴方向]

• 决定主轴（main axis）的方向

  属性值有：

  -row（默认值）:---->主轴的方向就是从左到右

  -row-reverse：---->主轴的方向就是从右到左

  -column：---->主轴的方向从上往下

  -column-reverse：---->主轴的方向就是从下到上

2· justify-content[主轴上排序]

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

属性值有：

• flex-items之间没有距离

  -flex-start（默认值）:---->与main start方向进行对齐

  -flex-end:---->与main end方向进行对齐

  -center:---->居中对齐

• flex-items之间有距离

  -space-between:---->flex-item之间的距离相等并且与main start和main end两端进行齐；

  -space-evenly:---->flex-item之间的距离相等并且flex-item与main start和main end之间 的距离等于flex-items之间的距离

  -space-around:---->flex-item之间的距离相等并且flex-item与main start和main end之间 的距离是flex-items之间的距离的一半

3· align-items[交叉轴排序]

决定flex-item在交叉轴（cross axis）上的对齐方式

属性值有：

-normal：---->在弹性布局中效果和stretch一样

-stretch：---->当flex-items在cross axis方向的size为auto的时候，会自动拉伸至填充flex-container（前提是没有设置高度）

-flex-start：---->与cross start对齐

-flex-end：----> 与cross end对齐

-center：---->居中对齐

-baseline：---->与基准线对齐（对齐九永远都是第一行文本作为基线的）

4· flex-wrap[单行还是多行]

决定了flex-container是单行还是多行，默认情况下，所有的flex-item都会在同一行显示
属性值有：
-nowrap（默认值）：---->单行

-wrap：---->多行

-wrap-reverse：---->多行（对比wrap，cross start与cross end方向相反）

5· flex-flow：

是flex-direction和flex-wrap的简写，可以省略，顺序任意

6· align-content[多行在交叉轴排序]

决定了多行flex items在across axis上的对齐方式，用法类似于justify-content

属性值有：

• flex-items之间没有距离

  -stretch（默认值）:---->与align-items的stretch类似

  -flex-start---->与across start方向进行对齐

  -flex-end:---->与across end方向进行对齐

  -center:---->居中对齐

• flex-items之间有距离

  -space-between:---->flex-item之间的距离相等并且与across start和across end两端进行齐；

  -space-evenly:---->flex-item之间的距离相等并且flex-item与across start和across end之间 的距离等于flex-items之间的距离

  -space-around:---->flex-item之间的距离相等并且flex-item与across start和across end之间 的距离是flex-items之间的距离的一半
  

（二）·应用在flex item上的CSS属性

1·order[排步顺序]

• 决定了flex items的排步顺序，可以设置任意的整数，值越小就越排在前面，默认值就是0

2·align-self[类似align-items属性]

• 可以通过align-self覆盖flex container的align-items属性

• auto（默认值）-------->遵从flex container的align-items设置

• strech,flex-start,flex-end,center,baseline效果类似于align-items

3·flex-grow[flex-item如何扩展]

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

• 当flex container在main axis方向上还有剩余的size的时候，flex-grow才会有效果

• 如果所有的flex items在flex-grow总和sum超过1， 每一个flex-item扩展的size为flex-container的剩余siza*flex-grow/sum；

• 如果所有的flex items在flex-grow总和sum不超过1， 每一个flex-item扩展的size为flex-container的剩余siza*flex-grow；

• flex-items扩展后的size不能超过max-width/max-height

4·flex-shrink[flex-item如何收缩]

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

• 当flex container在main axis方向上超过flex container的size的时候，flex-shrink属性才会有效果

• 如果所有的flex items在flex-shrink总和sum超过1， 每一个flex item收缩的size

  为flex-items超出flex-container的siza*收缩比例/所有的flex-items收缩的比例之和；

• 如果所有的flex items在flex-grow总和sum不超过1， 每一个flex item收缩的size

  为flex-items超出flex-container的sizasum收缩比例/所有的flex items收缩的比例之和；

  收缩比例=flex-shrink*flex item的base size【base size就是flex item放入flex container之前的size】

• flex-shrink收缩后的size不能超过min-width/min-height

5·flex-basis[主轴上items的大小]

• 用来设置flex-item在main axis方向上的base size

​ auto（默认值），具体的宽度数值（100px）

• 决定flex-items最终在base size的因素，优先级从高到低
  1. max-width/max-height/min-width/min-height
  2. flex-basis
  3. width/height
  4. 内容本身的size

6·flex[缩写属性]

​ flex-grow，flex-shrinnk，flex-basis的简写属性，可以指定1个,2个或者3个值

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

• 一个无单位数（number），他会被当做的值
• 一个有效的宽度值（width），他会被当做的值
• 关键字none，auto，或者initial

双值语法：

• 第一个值必须是无单位数，他会被当做的值

• 第二个值必须是以下其中之一：

​ a:一个无单位数(number)，他会被当做的值

​ b:一个有效的宽度值（width）,他会被当做的值