Flex布局的认识

Flex布局的认识

文献种类：专题技术文献；

开发工具与关键技术：DW 实现弹性布局
作者：李国旭；年级：1801班；撰写时间：2019年2月21日

一、 Flex，意为“弹性布局”，是传统盒状模型的另一种形态的模式更加灵活。任何一个容器都可以指定为Flex布局。Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。如图：我们在做弹性布局一定要先把这个文档引入进来，不然就算你设置了display-felx也不会有那个效果。

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

二、六大容器的属性
flex-direction：属性决定主轴的方向
flex-wrap：换行
flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content：属性定义了项目在主轴上的对齐方式。
align-items：属性定义项目在交叉轴上如何对齐。
align-content：属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用。

从下图我们可以清晰的看出来这个弹性布局的各种属性而外面则是一个大容器用来装这些属性

（注明：上图来自老师）

效果图：
不经压缩的是这样向右排列的不换行显示

一压缩后它就会换行显示