前端--弹性盒模型flex布局

弹性盒模型flex

一、目的

• 提供一种更加有效的方式来布置、对齐和分布在容器之间的各项内容，即使他们的大小是未知的变化的。
• 让容器有能力改变项目的宽和高，以填满可用空间。
• 布局与方向无关
  （1）块属性----垂直
  （2）行间------水平
  （3）以上拓展性太差
• 最适合小规模布局（大规模用网格）

二、属性

1、display：flex/display：inline-flex

• 适用于父级元素
• 生命要使用弹性盒子

2、flex-direction

• 写在父级css中，但是作用于子级
• 检索，子级在盒子中的位置，说白了就是子级的排列顺序
• 值
  （1）row-----横向，左到右
  （2）row-reverse-----反横向，右到左
  （3）column-----纵向，从上到下
  （4）column-reverse-----反纵向，从下到上

3、flex-wrap

• 写在父级，作用于子级
• 检索，子级是否超出父级，说白了就是换行不换行
<