Flex布局/弹性布局-基础入门

1.Flex布局原理

1.1布局原理

flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。他所有子元素自动成为容器成员，简称为 Flex 项目（flex item）,简称“项目”。

• 体验中的div就是flex父容器
• 体验中的span就是子容器flex项目
• 子容器可以横向排列也可以纵向排列

总结flex布局原理：
就是通过给父盒子添加flex属性，来控制盒子的位置和排列方式

2.flex布局父项常见属性

2.1 常见父项属性

以下有6个属性是对父元素设置的

• flex-direction: 设置主轴的方向
• justify-content: 设置主轴上的子元素排列方式
• flex-wrap: 设置子元素是否换行
• align-content: 设置侧轴上的子元素排列方式（多行）
• align-items: 设置侧轴上的子元素排列方式（单行）
• flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap