持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第31天，点击查看活动详情

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

来了来了，他真的来了~

正文

flex-direction
- 设置flex元素的主轴方向
- row
  - 横向为主轴
- row-reverse
  - 横向反向排列
- column
  - 纵向为主轴
- column-reverse
  - 纵向反向排序，同row-reverse
flex-wrap
- flex换行属性
- 属性值
  - nowrap
    - 不换行
  - wrap
    - 换行
  - wrap-reverse
    - 已相反的顺序换行
flex-flow
- flex-flow: flex-direction flex-wrap;
- 是flex-dirction 和 flex-wrap的复合属性
- 例如：flex-flow:row-reverse wrap;
flex-grow
- flex放大，作用与flex元素宽度较大，内部子项目不足以铺满元素
- 为0时不放大，>=1时放大，默认为1
- 所有项目的flex-grow加一起，越大的flex-grow，则放大比例越大，所以宽度也就越大
- 例如：
  - 三个项目，分别为50px、50px、50px，而flex父元素的宽度是300px，剩余了150px的空间
  - 正常情况下是这样的
  - 设置第一个项目的flex-grow为2，第二个项目的flex-grow为1，则为
    
    第一个项目为150px，第二个项目为100px，第三个项目为50px
    
    可以看到，第一个项目的放大比例是第二个的两倍，第三个项目依然宽度不变，因为第一个项目flex-grow为2，第二个项目flex-grow为1，第三个项目flex-grow为默认的0，所以放大比例为2:1:0
flex-shrink
- flex缩小，作用于flex元素宽度不够用，内部子项目宽度超长，所以所有子项目都要相应的缩小来填充满flex元素
- 为0时不缩小，>=1时可搜索，默认为1。
- 所有项目的flex-shrink加一起，越大的flex-shrink，则缩小比例越大，所以宽度越小。
- 例如：
  - 三个项目，分别为100px、100px、150px，而flex父元素的宽度是300px，超出了50px
  - 正常情况下是这样的
  - 设置第一个项目的flex-shrink为2，且第三个项目为的flex-shrink为0，则为
    
    此时第一个项目宽度为66.666px，第二个项目宽度为83.336px，第三个项目的宽度为150px
    
    可以看到，第一个项目缩小的比例是第二个项目缩小比例的两倍，因为第一个项目的flex-shrink为2，第二个项目的flex-shrink为默认的1，所以就是2:1
flex-basic
- 前面说到的flex-shrink和flex-grow的放大和缩小的基数都是依据自身的flex-basic的，默认flex-basic就是本身宽度
flex
- flex是flex-grow、flex-shrink、flex-basic的复合属性
- flex默认值是0 1 auto
- flex：auto就是flex：1 1 auto；
- flex：0就是flex：0 0 auto；
align-items
- 控制flex元素内部子项目的副轴排列方向
justify-content
- 控制flex元素内部子项目的主轴排列方向
order
- 控制flex元素内部子项目的排序优先级
- number类型，越大则优先级越高
align-content
- 在display:flex；的元素内部定义。针对换行的flex元素，控制换行的元素在flex元素中的布局
- flex-end
- center
align-self
- 控制单个项目的布局方式
- flex元素的align-items为center的样子
- 设置绿色项目的align-self为flex-start