Flexbox布局

 

    虽然早就用过flexbox这个东东，但是平常还是不太愿意用它，都是采用float+宽度百分比来实现多列布局，原因很简单，每次用flexbox都是copy的一些代码，对它的理解并不是很透彻！！！

    一.定义

    根据规范中的描述可知道，Flexbox模块提供了一个有效的布局方式，即使不知道视窗大小或者未知元素情况之下都可以智能的，灵活的调整和分配元素和空间两者之关的关系。简单的理解，就是可以自动调整，计算元素在容器空间中的大小。
    那如何使用呢？举个栗子吧

    

    效果如图：

    

    li本来是块状元素，那么1,2,3,4这四个方块本来是垂直排列的，应用display:flex;之后就水平排列啦

   从中我们得理解两个选项:

   （1）Flex容器（Flex Container）：父元素显式设置了display:flex

   （2）Flex项目（Flex Items）：Flex容器内的子元素

  

  二.flex容器属性

  

  看到这么多属性，就觉得麻烦，但是为了彻底搞懂，就耐心点吧

  1.flex-direction:控制Flex项目沿着主轴（Main Axis）的排列方向。通俗点说就是决定Flex项目如何排列，它有四个值：

     

     行（水平）排列、列（垂直）排列或者行和列的反向排列，默认值是row,自己可以在先前那个例子上try一try,偏于理解哈，毕竟事件出真知！硬道理啊！

   2.flex-wrap:Flex项目在Flex容器内是否换行排列。

      

      换行排列、不换行排列、换行排列且方向相反，默认值是nowrap

   3.flex-flow:是flex-direction和flex-wrap两个属性的速记属性，即多个值写在一行

      举个例子：

      

   4.justify-content：主要定义了Flex项目在横向上的对齐方式。

      

     flex-start让所有Flex项目靠开始边缘（左对齐）

     

  flex-end让所有Flex项目靠结束边缘（右对齐）

     

  center让所有Flex项目排在中间（居中对齐）

     

  space-between让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）

     

  space-around让每个Flex项目具有相同的空间

      

   5.align-items:它主要用来控制Flex项目在Cross-Axis(纵向)对齐方式

      

      stretch:align-items的默认值是stretch。让所有的Flex项目高度和Flex容器高度一样。

      

      flex-start:让所有Flex项目靠y轴开始边缘（顶部对齐）

      

      flex-end：让所有Flex项目靠Cross-Axis（y轴）结束边缘（底部对齐）

      

      center让Flex项目在Cross-Axis中间（居中对齐）

      

      baseline让所有Flex项目在Cross-Axis（y轴）上沿着他们自己的基线对齐。注意与flex-start比较，看这条红线的位置就知道

      

   6.align-content：用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和align-items值一样，但除了baseline属性值。

      stretch使用stretch会拉伸Flex项目，让他们沿着Cross-Axis(y轴)适应Flex容器可用的空间。

      

     flex-start这次是让多行Flex项目靠Cross-Axis开始边缘。沿着Cross-Axis从上到下排列。因此Flex项目在Flex容器中顶部对齐。

      

     flex-end刚好和flex-start相反，让多行Flex项目靠着Cross-Axis结束位置。让Flex项目沿着Cross-Axis从下到上排列，即底部对齐

      

     center让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐。

      

 三.Flex项目属性

     果然是一波接着一波，一上午都快过去了，这个flex真是繁杂

     

    1.order：允许Flex项目在一个Flex容器中重新排序。基本上，你可以改变Flex项目的顺序，从一个位置移动到另一个地方。这不会影响源代码。这也意味着Flex项目的位置在HTML源代码中不需要改变。order属性的默认值是0。

       它可以接受一个正值，也可以接受一个负值。值得注意的是，Flex项目会根据order值重新排序。从底到高。

       这么厉害的吗？来吃个栗子吧！

       代码：

       

       效果：

    

       加入order之后，观察：

       代码：

       

       效果：

      

    2.flex-grow 和 flex-shrink:Flex项目最优秀的一点就是灵活性。flex-grow和flex-shrink属性允许我们玩这个灵活性。flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。

       他们可能接受0或者大于0的任何正数。0 || positive number。

      (1)flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。

          比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum，是为权重也。

          举个栗子：

          

          效果图:

        

          如果各个字块占据的比例加起来少于1，那么剩余的那部分就不算，如下去，3块的和为0.5+0.2+0.1=0.8

          

          效果图如下：绿色的那个地方就是剩余的部分

        

     (2)flex-shrink可以在空间不够时让各个子元素收缩以适应有限的空间了

         举个例子：父元素 500px。三个子元素分别设置为 200px，400px，150px。

         三个子元素的 flex-shrink 的值分别为 1，2，3。

         首先，计算子元素溢出多少：200 + 400 + 150 - 500 = -250px。

          那这 -250px 将由三个元素的分别收缩一定的量来弥补。

         具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。

         所以总权重为 1 * 250 + 2 * 400 + 3 * 150 = 1500

         三个元素分别收缩：

         250 * 1(flex-shrink) * 250(width) / 1500 = -41.7

         250 * 2(flex-shrink) * 400(width) / 1500 = -133.3

         250 * 3(flex-shrink) * 150(width) / 1500 = -75

        三个元素的最终宽度分别为：

        250 - 41.7 = 208.3

        400 - 133.3 = 266.7

        150 - 75 = 75

        贴代码:

        

        效果图如下:

       

    3.flex-basis属性可以指定Flex项目的初始大小。也就是flex-grow和flex-shrink属性调整它的大小以适应Flex容器之前。

       又拿个栗子哈，代码贴一下

       

       加入：flex-basis: 300px;前后效果图对比，有对比 才有伤害。。。

     

     

  参考：理解Flexbox：你需要知道的一切

 

 

 

          

 

       

 

 

 

 

 

 

      

 

转载于:https://www.cnblogs.com/cutemantou/p/8650069.html