前端项目如何让布局像打字一样简单（一）

科普一波flex个人封装用法

（不太熟悉的同学请移步阮一峰老师flex布局）

因为这段工作经历，想写给对css布局没有概念的同学，虽然比较简单，希望能帮助有需要的同学，自己也总结复习一下flex布局（给大佬们递java.gif） 首先为什么选择flex布局，主要是对于移动端布局比较友好，兼容性什么的就不说了（ps:兼容永远是前端一大话题） flex主轴核心理念是围绕X、Y坐标系来展开布局（简单粗暴理解是上、下、左、右是一维的四个点的方向）。

一、常规电商产品横向布局

1.左右自适应布局

其实这些样式布局比较常见，主轴是在X轴（flex-direction：column），用到flex属性主要是flex-grow,flex-shrink,flex-basis，为了兼容性加一点附加其它属性。

//封装一层css方便使用
.flex {
	display: flex;
	display:-webkit-flex;
}
.flex-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    -ms-flex-negative: 0;
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-grow-1 {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    -ms-flex-negative: 1;
    flex-grow: 1;
    flex-shrink: 1;
}

<div class="flex">
	<div class="flex-grow-0></div>
	<div class="flex-grow-1></div>
</div>

以上能代码就简单实现，左右的自适应大小布局。

2.上下弹性布局

CSS盒子模型，简单粗暴的理解就是一块一块（上下左右）的贴在一起（和日常盖楼房的一层一层盖楼差不多，视觉点是从上往下看，而且是透视的），还要区分是否在正常流里面。 上下布局需要用到上面弹性（flex-grow-0，flex-grow-1）布局属性，主轴的方向需要改变一下flex-direction: column，主角是align-items属性，属性值：flex-start | flex-end | center | baseline | stretch，这里用到flex-end，意思是向下对齐。

//
.flex {
	display: flex;
	display:-webkit-flex;
}
.flex-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
}
.flex-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    -ms-flex-negative: 0;
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-grow-1 {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    -ms-flex-negative: 1;
    flex-grow: 1;
    flex-shrink: 1;
}
.flex-y-end {
    display: flex;
    align-items: flex-end;
}
<div class="flex">
	<div class="flex-grow-0>图片</div>
	<div class="flex-col flex-grow-1>
      <div class="">
          <--上半对齐-->
          <div class="">标题</div>
          <div class="">副标题</div>
      </div>
      <div class="">
        下半对齐
      </div>
    </div>
</div>

3.左右等分布局

左右等分布局主要是用justify-content: space-between，其它值有：flex-start | flex-end | center | space-between | space-around;

//全套电商产品展示横向布局
.flex {
	display: flex;
	display:-webkit-flex;
}
.flex-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
}
.flex-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    -ms-flex-negative: 0;
    flex-grow: 0;
    flex-shrink: 0;
}
.flex-grow-1 {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    -ms-flex-negative: 1;
    flex-grow: 1;
    flex-shrink: 1;
}
.flex-y-end {
    display: flex;
    align-items: flex-end;
}
.jc-sa {
    justify-content: space-between;
}


<div class="flex">
	<div class="flex-grow-0>图片</div>
	<div class="flex-col flex-grow-1>
      <div class="">
          <--上半对齐-->
          <div class="">标题</div>
          <div class="">副标题</div>
      </div>
      <div class="flex jc-sa">
      <--左右等分布局-->
        <div class="">左</div>
        <div class="">右</div>
      </div>
    </div>
</div>

总结：

CSS布局有很多代码实现方式，主要考虑兼容性、性能、体积；用最少的代码实现最复杂的功能，并且保证兼容性和性能就是好代码。

欢迎加入技术群： react-redux交流群号:591570186,前端交流群群号:277034826

以下是个人在移动端项目开发的CSS代码，如有不对之处欢迎大佬纠正。

.bold {
    font-weight: bold;
}
.fz22 {
    font-size: 22px;
}
.fz24 {
    font-size: 24px;
}
.fz26 {
    font-size: 26px;
}
.fz28 {
    font-size: 28px;
}
.fz30 {
    font-size: 30px;
}
.fz32 {
    font-size: 32px;
}
.fz34 {
    font-size: 34px;
}
.c333 {
    color: #333;
}
.c666 {
    color: #666;
}
.c999 {
    color: #999;
}
.p24 {
    padding: 24px;
}
.plr-24 {
    padding-left: 24px;
    padding-right: 24px;
}
.fixed {
    position: fixed;
}
.rel {
    position: relative;
}
.abs {
    position: absolute;
}
.flex {
    display: flex;
}
.j-c {
    justify-content:space-around;
}
.jc-sa {
    justify-content: space-between;
}
.jc-center {
    justify-content: center;
}
.text-align {
    text-align: center;
}
.flex-grow-0 {
    min-width: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}
.flex-grow-1 {
    min-width: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}
.flex-y-center {
    display: flex;
    align-items: center;
}
.flex-y-end {
    display: flex;
    align-items: flex-end;
}
.flex-x-center {
    display: flex;
    justify-content: center;
}
.flex-direction {
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    flex-direction: row;
}
.flex-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
}
/**文本超出省略*/
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis-two {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}