Flex布局,简单易懂

哈喽~今天做下简单的复盘, 首先呢Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来布局盒装模型的,简单的说就是排列块级元素,  这里元素在flex中说的是项目  我就说明常用的5个属性,接下来简单说下

三、容器的属性

以下5个属性设置在容器上。

• flex-direction  元素方向的排列, 水平/反方向水平/垂直/反方向垂直这四种,至于什么样式,自己过一遍印象深

  .container{
       flex-direction:row | row-reverse |  column | column-reverse; 
  }

   

• flex-wrap  项目换行 , 不换行/换行/反方向换行,就这三种样式

  .container{
    flex-wrap: nowrap | wrap | wrap-reverse;
  }

   

• flex-flow   flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap

  .container{
      flex-flow:<flex-direction> || <flex-wrap>;
  }

   

• justify-content  项目水平对齐方式, 左对齐(默认值)/右对齐/中间对齐/两端对齐，项目之间的间隔都相等/每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

  .container{
      justify-content:flex-start | flex-end | center | space-between |space-around;
  }

   

• align-items  项目垂直对齐 , 上对齐/下对齐/终点对齐/基线对齐/拉升对齐(stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度)

• .container{
      align-items:flex-start | flex-end | center |baseline | stretch;
  }

   这些真的好枯燥啊...现在来一个微信界面实例解说下,

• 首先黄框这水平有序排列的实例 :

    .黄框包裹的container{  

       display: flex; (默认水平方向排列)        

        justify-content: center;(水平对齐) }

• 解说: 设置样式display: flex和 justify-content: center就搞定啦,原因是当我们设置display: flex,就把所有container包裹的项目都自动分块了,而且flex默认水平方向排列,所以我们只要把对齐方式设为居中就可以实现黄框里的效果 .图例往下拉.

• 至于红框的话是垂直排列的实例:

    .红框包裹的container{    

       display: flex;(默认水平方向排列)        

       flex-direction: column (改为垂直方向排列)        

       justify-content: space-between(两端对齐)  }

       当然具体css细节,如margin,padding,font-size等自己去调整.框架出来了后面就简单了.图例往下拉.

1. 总结:

2.  首先先设置项目display:flex为弹性布局 

3. 其次判断自己的项目是想要水平方向排列还是垂直方向排列呢?设置属性flex-direction

4. 最后就是项目的对齐方式是需要水平对齐还是垂直还是居中等对齐,设置属性为 justify-     content(水平对齐)和align-items(垂直对齐)

       只要掌握这三步骤,flex布局就很简单,如果设置元素display:flex后,却没有达到水平排列的效果,一定记得去设置该样式的元素下查看是块级元素还是行内元素,如果需要转块级元素,在元素样式上加display:block或者直接给元素带上div标签,这两者都可以.这样就可以达到效果. 另外别忘了flex默认是水平排列方式哦.