Flex布局处理盒模型三大属性

              **Flex布局处理盒模型三大属性**

开发工具与关键技术：Adobe Dreamweaver CC 2017 前端

作者：刘剑鸿

撰写时间：2019年1月16日星期三

接触前端，了解CSS样式布局的三大属性
1display属性 2float属性 3position属性，传统属性能实现在页面比较精准的位置，可操作繁琐，代码多，不够整洁。而Flex布局能够实现传统属性大部分功能，并且操作方便，整洁性高。

1. Flex布局处理1display属性

在使用传统行内元素 转化为块级元素时，需要在每个子级类里添加display:block;

而使用Flex布局，直接在父级元素上添加display:flex;即可让以下的子级的行内元素转化为块级元素。

使用该方法能简化代码
2. Flex布局处理2float属性

Float属性能使把元素从文档流中取出来进行排布，而后面被设置了floa的元素的元素，有足够的空间的话，向上提升到浮动元素平起平坐的位置。那么我不想后面的元素跟着浮起来，这就要在该元素设置overflow: hidden;

而Flex布局中。默认存在水平主轴（main axis），主轴的方向默认为从左往右flex-direction：row;该功能与左浮动相似，flex-direction：row-reverse实现的功能与右浮动相似；

使用该属性功能，不需考虑是否波及下面写的代码。

3. Flex布局处理3position属性

父盒子 里面想要让 里面的子盒子 在父盒子的中间，或者在某个特殊位置。一般使用position属性既要设置position: relative;又要position: absolute;而且还要在子盒子里设置具体的方位。

而在Flex布局，主要使用justify-content属性，align-items属性，前者属性定义了项目在主轴上的对齐方式。后者属性定义了项目在叉轴上的对齐方式。例如定位子盒子在父盒子的中央

只需三句代码完成！

提醒：Flex布局定位元素的位置只适合定位到一些特殊位置（靠角，中间）