CSS | 弹性盒的介绍

flex(弹性盒、伸缩盒）

是CSS中的一种布局手段，它主要用来代替浮动来完成页面的布局；fles可以使元素具有弹性，可以使元素根据页面的大小的改变而改变。

• 弹性容器：要使用弹性盒，必须要将一个元素设置为弹性容器。我们通过display来设置弹性容器。

1. display: flex            设置为块级弹性容器
2. display: inline-flex  设置为行内弹性容器（主要区别就是不会独占一行）

• 弹性元素：弹性容器的子元素就是弹性元素（弹性项），弹性元素可以同时是弹性容器。

既然分为弹性容器和弹性元素，那么他们的样式也是分开设置的。

弹性容器的属性：

• flex-direction:指定容器中元素的排列方式

     可选项：row               默认值，在容器中水平排列（自左向右）

                   row-reserve  在容器中反向水平排列（自右向左）

                   column          在容器中纵向排列（自上向下）

                   column-reserve 在容器中反向纵向排列（自下向上）

   主轴：弹性元素的排列方向

   侧轴：与主轴垂直方向的轴

• flex-wrap: 设置弹性元素是否在弹性容器中自动换行

       可选值：

                  nowrap 默认值，元素不会自动换行

                  wrap     元素沿着辅轴方向自动换行

                  wrap-reverse 元素沿着辅轴反方向换行

flex-flow: wrap和direction的简写属性。

• justify-content:如何分配主轴上的空白空间（主轴上的元素如何排列）

     可选值： 

      flex-start  元素沿着主轴起边排列

      flex-end   元素沿着主轴终边排列

      center      元素居中排列

      space-around  空白分布到元素两侧

      space-between 空白均匀分布到元素间

      space-evenly    空白分布到元素的单侧

• align-items:元素在辅轴上如何对齐（元素间的关系）

     可选值：

     stretch 默认值，将元素的长度设置为相同的值

     flex-start 元素不会拉伸，沿着辅轴起边对齐

     flex-end 沿着辅轴的终边对齐

     center   居中对齐

     baseline 基线对齐

当我们给一个元素设置为弹性容器时，利用：justify-content:center;align-items:flex-start;可以实现水平和垂直方向的居中。

弹性元素的属性：

• flex-grow: 指定弹性元素的伸展系数，当父元素有空余空间时，弹性元素会按比例伸展，默认值是0。
• flex-shrink:指定弹性元素的收缩系数，当父元素的空间不足以容纳弹性元素时，对子元素进行收缩，默认值是1。
• flex-basis:指定的是元素在主轴上的基础长度，如果主轴是横向的，则该指定的就是元素的宽度；如果主轴是纵向的，则该值指定的是就是元素的高度。

       - 默认值是 auto，表示参考元素自身的高度或宽度

       - 如果传递了一个具体的数值，则以该值为准

• align-self:用来覆盖当前弹性元素上的align-items
• order: 决定弹性元素的排列顺序

flex 可以设置弹性元素所有的三个样式：增长、缩减、基础；

      - initial : "flex: 0 1 auto"

      - auto  : "flex: 1 1 auto"

      - none : "flex: 0 0 auto" 弹性元素没有弹性

什么是弹性容器？什么是弹性元素？它们有哪些属性且分别是怎么设置的，今天大概有个简单的了解，对自己算是一个复习，也希望对大家有一点点帮助。