flex布局原理简述

一、基本概念

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

二、原理

        通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，从而实现flex布局。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三、特点

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

        2、子元素可以横向排列也可以纵向排列，默认横向排列，任何盒子都可，原行内元素可以直接设置宽高