flex布局学习笔记

01 认识flex布局

两个重要概念：

• 开启了flex布局的元素叫flex container
• flex container 里面直接子元素叫做flex items

设置display属性为flex或者inline-flex可以成为flex container

• display:flex flex布局变成块级元素
• display:inline-flex flex布局变成行内元素

02 flex 布局模型

1.主轴和交叉轴

• 主轴： main axis 主轴开始： main start 主轴结束位置：main end 主轴的大小：main size
• 交叉轴： cross axis 交叉轴开始： cross start 交叉轴结束：cross end 交叉轴大小：cross size

2. flex相关属性

（1）应用在flex container上的css属性

• flex-flow 将flex-direction和flex-wrap放在一起

• flex-direction 决定主轴的方向
  默认方向：沿着main axis(主轴)从main start开始向main end方向排布
  4个值:

  • row 默认方向 主轴从左到右
  • row-reverse 反转主轴方向 主轴从右到左
  • column 列 主轴从上到下
  • column 主轴从下到上

• flex-wrap 换行显示（默认情况下，所有flex items都会在一行显示，会进行压缩）

  • flex-wrap: no-warp; (一行显示)
  • flex-wrap: wrap; (换行显示，多行显示)
  • flex-wrap:wrap-reverse (使用较少，反转)

• justify-content
  决定items在主轴的对齐方式

  • flex-start/flex-end: 与main end对齐
  • center： 居中对齐
  • space-between：分散对齐，最边上的item靠边，中间item等距
  • space-evenly：等分空余位置
  • space-around： 靠边的item等分的空余位置是其他item的一半
    

• align-items
  决定了flex items在交叉轴的对齐方式

  • normal：在弹性布局中，效果和stretch一样
  • stretch： 当flex items在cross axis方向上的size为auto时，会自动拉伸至填充flex container
  • flex-start: 与cross start对齐
  • flex-end： 与cross end对齐
    align-items: flex-end;
  • center： 居中对齐
    align-items: center;
    
  • baseline： 与基准线对齐
    align-items: baseline; 基线对齐，第一行文本基线
    

• align-content
  决定了多行flex items在交叉轴上的对齐方式，用法与justify-content类似

  • flex-start/flex-end: 与cross main， cross end对齐
  • center： 居中对齐
  • space-between：items之间等距，与cross start，cross end两端对齐
  • space-evenly：等分空余位置 平分
  • space-around： 靠边的item等分的空余位置是其他item的一半

（2）应用在flex items上的css属性

• flex: flex-grow | flex-shrink | flex-basis 三者的简写
  flex: 1 2 100px
• flex-grow: 使item撑满宽度值 （成长）
  （1）可以设置任意非负数字（小数，整数，0），默认值为0
  （2）当flex container 在主轴方向上有剩余size时，flex-grow属性才会生效
  （3）如果flex items的flex-grow总和sum超过1， 每个flex item扩展的size按比例分配主轴方向剩余的size
  （4）如果flex items的flex-grow总和sum不超过1， 每个flex item扩展的size 为container剩余的size*每个item flex-grow的值
• flex-shrink： 使item收缩，有最小宽度，flex-shrink值是收缩比例
• flex-basic
  用来设置flex items在main axis主轴方向上的base size 即item的大小
  flex-basic: 200px
  auto（默认值） 具体宽度值（100px）
• order
  决定flex items的排布顺序
  可以设置任意整数（正整数，负整数，0），值越小就越排在前面，默认值为0
• align-self
  可以通过align-self 覆盖flex container设置的align-items
  可选的值：stretch、flex-end、center、baseline，效果跟align-items一致