flex布局复习

1.认识flex布局

• flex布局(Flexible布局，弹性布局)。
• 目前移动段用的最多，现在PC端也是用的越来越多了。

2.两个重要的概念

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

3.开启flex布局(设置元素的属性display)

• display:inline-flex; 行内元素
• display:flex 块级元素

4.flex布局模型

5.flex相关的属性

1.应用到flex container上的CSS属性

• 1.flex-flow
• 2.flex-direction
• 3.flex-wrap
• 4.justify-content
• 5.align-items
• 6.align-content

2.应用到flex items上的CSS属性

• 1.flex
• 2.flex-grow
• 3.flex-basis
• 4.flex-shrink
• 5.order
• 6.align-self

6.flex container上相关的属性

1.flex-flow

• 1.flex-flow 是flex-direction 和 flex wrap属性的简写

2.flex-direction

• 1.flex items 默认都是沿着main axis(主轴)从main starat 往 main end方向排布的。

• 2.flex-direction 决定了main axis(主轴)的方向。有四个取值。

  • row(默认值) ： 默认方向从左到右。
  • row-reverse : row反向，即从右到左。
  • column : 改为列之后，主轴方向从上到下，排布。
  • column-reverse : 主轴反转，从下到上排布。

3.flex-wrap

• flex 布局默认 当flex items在一行不能显示的时候，就会被压缩，从而实现在同一行显示
• 1.flex-warp: np-wrap不换行，是默认效果，flex items会被压缩
• 2.flex-warp:wrap 换行但是不会紧挨，而是在交叉轴平分了交叉轴的高度。
• 3.flex-wrap: wrap-reverse; 换行，并且在交叉轴反转。

4.justify-content

• 1.justify-content 决定了flex items 在主轴上的对齐方式。有5个取值
  • flex-strat(默认值) 在主轴的strat位置对齐
  • flex-end 在主轴的end位置对齐
  • center 在主轴的中心位置对齐，居中
  • space-between 两边元素贴着容器式居中
    • flex items之间的距离相等
    • 与main start 和 main end两端对齐
  • space-evenly 所有元素之间，以及元素和容器之间距离完全相等
    • flex items之间的距离相等
    • flex items之间的距离与main start 和 main end之间的距离相等
  • space-around 两边元素贴容器距离小，中间元素和元素之间距离大。(两边贴盒子的距离之和等于中间元素之间的距离 )

5.align-items

• 1.align-items 决定了flex items 在 cross axis(交叉轴)上的对齐方式

  • 默认值为 normal，当元素没有设置高度的时候，会将元素的高度拉伸为当前交叉轴的高度。 当有高度的时候，正常。
  • stretch: 当flex items在cross axis方向的size为auto时，会默认拉伸至填充flex container。
  • normal 和 stretch 当div高度不一的时候时根据顶部对齐，也就是交叉轴的strat开始对齐。

  当只有一行元素的时候

  • flex start 当div高度不一的时候时根据顶部对齐，也就是交叉轴的strat开始对齐。
  • flex end 当div高度不一的时候时根据底部对齐，也就是交叉轴的end开始对齐。
  • center 在交叉轴的中心点对齐(居中对齐)
  • baseline 保证基线对齐，即根据多个元素中的文字底部的距离对齐，基线为第一行文本的底部为准

6.align-content

• 1.决定了多行flex-item 在交叉轴上的对齐方式
  • align-content: stretch 没有高度的时候进行拉伸。(基本不用)
  • align-content: flex-start; 在交叉轴上从交叉轴的start依次排到end
  • align-content: flex-end; 在交叉轴上从交叉轴的end依次排到start
  • align-content: between: 最上面一排，最下面一排，中间平分
  • align-content: evevly; 所有元素之间，以及元素和容器之间距离完全相等
  • align-content: around; 上下元素贴容器距离小，中间元素和元素之间距离大。(两边贴盒子的距离之和等于中间元素之间的距离 )

7.flex items上相关的属性

• 1.order (给flex items排序)

  • 可以设置任意整数，(正整数，负整数，0)，值越小排列的越靠前。
  • 默认值均为0。

• 2.align-self

  • 当所有flex items的对齐方式为居中对齐，如果想要修改某个item的对齐方式可以这样使用。
  • 覆盖父亲元素中的相应属性

• 3.flex-grow

  • flex-gorw : 属性为正整数数字，将剩余的宽度划分为相应的比例，扩大flex items
  • 当属性全部为1时所有元素平分父元素剩余的宽度。

• 4.flex-shrink

  • 当没有设置flex-wrap时，所有的items都会被压缩，但是最小宽度为容器内部的文字宽度，所以会出现items溢出的bug
  • 加入父元素宽度为500，这时候有6items每个items为100px，这时候m每个都会收缩100 / 6 = 16.7px
  • 当给不同的items设置flex-shrink属性就会根据对应的比例进行收缩。
  • 小于1的时候，收缩的少会导致溢出。为要收缩的width * (所有flex-shrink的值相加) 剩余的width溢出

• 5.flex-basis

  • flex-basis设置主轴上的元素的宽度。

• 6.flex属性

  • flex属性时 flex-grow || flex-shrink || flex-basis的缩写，flex的属性可以指定一个值，两个值，三个值
  • 指定一个值 代表flex-grow
  • 带单位的值为flex-basis