flex布局相关总结&&实现元素框居中效果

css flex布局

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

块（Block），用于网页中的部分（节）
行内（Inline），用于文本
表，用于二维表数据
定位，用于元素的明确位置
弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

flex布局属性：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

1.对于父容器设置为display:flex,其容器内所有元素框都显示为弹性布局，可以随着视口大小伸缩

1. flex-direction

属性值： cloumn 相当于竖着从上到下排列
display：flex; flex-direction:cloumn 相当于
1.对于块元素 在文档流中布局也是从上到下，但是后者不具备 随着视口大小伸缩的功能，兼容性不好。
2.对于行内元素 可以设置 display:block 然后在文档流中效果和块元素一样，同样兼容性不好。
属性值： row 相当于横着从左到右排列
属性值： cloumn-reverse 相当于竖着从下到上排列
属性值： crow-reverse 相当于横着从下到上排列

2. flex-wrap

flex-wrap 属性规定是否应该对 flex 项目换行。默认值为nowrap，将不对 flex 项目换行。
属性值： wrap 规定 flex 项目将在必要时进行换行
属性值： nowrap 规定 flex 项目不对 flex 项目换行

3. flex-flow

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

4. justify-content

justify-content 属性用于横着对齐 flex 项目,flex-start ,将 flex 项目在容器的开头对齐（默认）
属性值： center 值将 flex 项目在容器的中间对齐（居中）
属性值：flex-end 值将 flex 项目在容器的末端对齐
属性值：space-around 值显示行之前、之间和之后带有空格的 flex 项目
属性值: space-between 值显示行之间有空格的 flex 项目

5. align-items

align-items 属性用于垂直对齐 flex 项目，stretch 值拉伸 flex 项目以填充容器（默认）
属性值类似于justify-content ,参考 https://www.w3school.com.cn/css/css3_flexbox.asp

6. align-content

align-content 属性用于对齐弹性线 ，和justify-content对比着写比较合适。stretch 值拉伸 flex 项目以填充容器（默认）
属性值和justify-content差不多，除了默认。

demo

让元素框居视口正中(方法不少，下面给出两个笔者认为兼容性比较好的，可维护性比较好)
方法一： 使用弹性盒子来实现居中

display: flex;
justify-content: center;  //水平方向居中
align-items: center;  //竖直方向居中
1
2
3

方法二：使用绝对定位并margin自适应进行居中

/*关键样式代码*/
#father{
         position:relative;
       }
   #son{
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
         margin:auto;
        }
1
2
3
4
5
6
7
8
9
10
11
12