Flex布局

               Flex布局

今天给大家带来的是Flex布局的一些知识！

首先讲的是Flex布局！

Flex布局讲的是：

        多个div的各种布局：

       容器属性：容器属性是加在容器上的

      项目属性：写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思  

      Flex布局比盒模型布局更直接简单方便；

（盒模型布局是使用浮动来布局的；但是过多的使用浮动来布局会是使页面布局混乱；从而出现了Flex布局它可以使我们开发者简单方便的完成布局，只简单使用几个属性与属性值就可以做出自己想要的布局）

 

Flex布局主要的是几个属性与属性值：

  容器属性：（容器属性是加在容器上的）

  简单的来说呢就是从所选元素的父元素上设置，就是容器属性了；项目属性就是直接加在所选元素上的属性；

1. flex-direction属性 （横/纵向排列，顺/倒序）

取值：横：row(默认) | row-reverse |

          纵：column | column-reverse

 

2.flex-wrap属性

取值：Nowrap(默认) | wrap （换行第一行在上方）| wrap-reverse（换行第一行在下方）

用于控制项目是否换行，Nowrap表示不换行（不换行会导致项目实际宽度变小）；

 

3。flex-flow属性*  （ 前面两个简写集合)

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row Nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

 

4.justify-content属性 

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

 

5.align-items属性

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。

6.align-content（*）

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用（flex-wrap:wrap）容器的宽度必须设置为div总数的宽度；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。

项目属性：

（写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思）

1.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

3.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

  4.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖width属性。

5.flex （*）

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大，但等分缩小。

6.align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。

 

以上的几个属性与属性值就可以完成页面上的大部分布局了，非常的好用！

以上这些就是Flex布局的一些知识点！

希望对大家有所帮助！

感谢大家！

 

 

 

 

原文地址：https://blog.csdn.net/weixin_57726539/article/details/116568754