封装flex布局---及flex简易解析--最简单入门上手flex布局

flex简介

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex布局为“弹性布局”。
任何一个容器都可以设置为flex布局，设置了flex属性的容器，其子成员元素都自动成为flex成员。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

导读

******上方是我在初次学习flex布局时候网上所能得到的知识点。看的懵懵懂懂~觉得很难去理解，萌生了一种flex布局太难的念想，我当时刚学前端，第一次学flex就放弃了。过了大半年后我再来系统的学习flex和运用到项目中来，来和大家分享一下经验，帮助你们最快最容易的去上手和运用在你的项目中。跟着我来=>

举例解读flex

-①.简单flex生效
首先我们要知道，怎么让一个容器（拿div举例）具有flex属性，很简单

<div class="main">
   <div class="one">1</div>
   <div class="two">2</div>
</div>

//css部分
<style>
   .main{
      display:flex;
   }
</style>

先不看css部分，我们知道上方的布局是三个嵌套关系的div，div是块级元素。所以界面上的展现应该是1和2一行一行显示的，如下

1
2

但是我们给类main加了flex后，其具有了flex布局容器的效果，下方的第一层元素全为其成员，并且子元素的float、clear和vertical-align属性将失效。也就是说内嵌的两个div不是块级元素了。所以界面展示：

12

-②flex布局的常用布局效果实现（具体的属性查看官网）
当我们给容器设置了flex属性过后，其还有很多flex相关的css属性可以设置~

1.align-items:center中心轴对齐

display: flex;
align-items: center;/* 交叉轴上如何对齐，每个div中心轴对齐 */

理解一下中心轴对齐，因为我们默认的轴是主轴（还有垂直的交叉轴），所以我们这个效 果是子元素成员水平对齐。怎么说呢，上个效果图，让你们形象的理解一下：

可以看到两个子元素的高度不一样，输入框要高于左右的文字描述，但是我们给父级容加 了flex布局和align-items：center后，中心轴对齐了！

2.justify-content 子元素排列的一个布局方式

这个有多种方式：
justify-content: center;/* 居中 */
justify-content: space-between;/* 两边排列 */
justify-content: space-around;/* 靠近两边，没有接触到旁边 */
justify-content: start;/* 靠近左侧 */

举例解释一下居中布局

 <div class="main">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
</div>

//css部分
<style>
   .main{
      width:300px;
      display:flex;
      justify-content:center;
   }
</style>

子元素会基于父元素的宽度进行自适应居中布局。

封装flex

其他的属性就不举例了，看到这里基本flex布局你也有了一个大概的认识，但是在一个项目中如果每次在类中都要这样去写属性，比如:
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: start;
会很长，浪费时间。我这边进行了一个flex的一个css简单封装,上代码：（css文件）

.f {
	display: flex;
	display:-webkit-flex;
	/* 设置为flex布局 */
}
.f-a-c {
	align-items: center;
	/* 交叉轴上如何对齐，每个div中心轴对齐 */
}
.f-a-b{
	align-items: baseline;
	/* 交叉轴上如何对齐，每个div中的第一行文字的基线（底部）对齐 */
}
.f-d-c {
	flex-direction: column;
	/* 排列方式，垂直 */
}
.f-w-w {
	flex-wrap: wrap;
	/* 换行方式 */
}
.f-j-c {
	justify-content: center;
	/* 居中 */
}
.f-j-b {
	justify-content: space-between;
	/* 两边排列 */
}
.f-j-a {
	justify-content: space-around;
	/* 靠近两边，没有接触到旁边 */
}
.f-j-s {
	justify-content: start;
	/* 靠近左侧 */
}
.f-s-0{
	flex-shrink: 0;
	/* 空间不足时也不被缩放,默认值为1会被缩放 */
}
.f-d-r{
	flex-direction: row;
	/*//水平布局*/

}
.f-d-c{
	flex-direction: column;
	/*垂直布局*/
}

一个项目，引入上方的代码后，我们前几个测试代码就可以简写了，比如使元素居中显示，上代码

 <div class="main f f-j-c">
   <div class="one">1</div>
   <div class="two">2</div>
   <div class="three">3</div>
</div>

具体其他的效果，比如垂直居中等等~靠各位自己去研究了，总之，用了这套封装的代码后，项目的布局开发周期会大大大大缩短很多！！！！

**点个赞？？**么么哒