弹性盒flexflex 是什么 flex 是 Flexible Box 的缩写,意为弹性布局 flex-directio

flex 是什么

flex 是 Flexible Box 的缩写,意为弹性布局

`flex-direction`

`flex-wrap`属性

`flex-flow`属性

flex-flow是属性flex-direction(当前的主轴方向）和flex-wrap（项目是否换行）的简写

语法: `flex-flow: flex-direction flex-wrap`


     <style>
       

         .container{
            height: 600px;
            display: flex;
            /* flex-direction: row ; */
            /* 默认主轴为水平方向 */
            /* flex-wrap: nowrap; */
            /* 默认不换行 */
            
            /* 上面的代码，等同于 flex-flow: row nowrap; */
            flex-flow: row nowrap;
           

         }

         .item{
           padding: 100px;
         }
    </style>

<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>

`justify-content`属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

效果图

   <style>
       

         .container{
            height: 600px;
            display: flex;
            flex-direction: row ;
            flex-wrap: nowrap;
            
             /* 居中对齐 ,*/
            justify-content: center;
           
            

         }

         .item{
          width: 200px;
          height: 200px;
         }
    </style>

<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>

`align-items`属性

该属性仅适用于: 单行容器
- 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

注意：默认的主轴是水平方向，这里的align-items 是指子元素交叉轴（即垂直方向）的排列对齐方式

如果设置 flex-direction:column 那此时主轴为垂直方向，那交叉轴就是水平方向

效果图

   <style>
       

         .container{
            height: 600px;
            display: flex;
            flex-direction: row ;
            flex-wrap: nowrap;
            
             /* 主轴方法space-between ,*/
            justify-content: space-between;

            /* 交叉轴，即垂直方向，排列设置居中 */
            align-items: center;
           
            

         }

         .item{
          width: 200px;
          height: 200px;
         }
    </style>

<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>

flex 多行容器交叉轴项目对齐

`align-content`属性

该属性仅适用于: 多行容器
多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现


    <style>
       

         .container{
            height: 600px;
            display: flex;
            flex-direction: row ;

            flex-wrap: wrap;
            
            /*  使用align-content的前提要设置 flex-wrap: wrap或 wrap-reverse*/
             align-content: flex-start;
           
           
            

         }

         .item{
          width: 200px;
          height: 200px;
         }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: rgb(173, 14, 101);">4</div>
    </div>
</body>

三、项目元素 item 的属性

`flex-grow`属性定义项目的放大比例，默认为`0`，即如果存在剩余空间，也不放大。


.item {
  flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

`flex-shrink`属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义


.item {
  flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-shrink ：0 是不收缩的

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}


    <style>
       

         .container{
            height: 600px;
            display: flex;
            flex-direction: row ;
            /* 默认的 */
            flex-wrap: nowrap;
            /* 默认不换行 */
            
         }

         .item{
          flex:1;
          height: 200px;
         }
    </style>
</head>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: rgb(173, 14, 101);">4</div>
    </div>
</body>

上面的例子：flex：1 ,是要设置在子元素上，子元素没有设置宽度，默认4个子元素，平分父元素的空间

`order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

align-self: 覆盖container align-items 属性

该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
.container{
    display: flex;
    height: 800px;
    background-color: rgb(219, 219, 219);
    flex-direction: row;
    flex-wrap: nowrap;
}
.container{
    /* container指定容器的对齐 flex-start */
    align-items: flex-start;
}
.item{
    width: 200px;
    height: 200px;
}
.item3{
    /* 元素3 item3 覆盖container的设置，flex-end */
    align-self: flex-end;
}

</style>
<body>
    <div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item item2" style="background-color: aqua;">2</div>
        <div class="item item3" style="background-color: aquamarine;">3</div>
    </div>
</body>
</html>

效果：

弹性盒flex

flex 是什么

flex-direction

flex-wrap属性

flex-flow属性

justify-content属性

align-items属性