flex-flow容器属性

flex-flow容器属性

flex-flow属性

含义及用法：

• flex-flow 属性是 flex-direction 和 flex-wrap
  属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式
• flex-direction 属性：规定灵活项目的方向
• flex-wrap 属性：规定灵活项目是否拆行或拆列

注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用

CSS语法：

flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

flex-direction值

• row
• row-reverse
• column
• column-reverse
• initial
• inherit

默认值是 “row”。 规定灵活项目的方向。

flex-wrap值

• nowrap
• wrap
• wrap-reverse
• initial
• inherit

默认值是 “nowrap”。 规定灵活项目是否拆行或拆列。

initial 设置该属性为它的默认值。请参阅 initial。

inherit 从父元素继承该属性。请参阅 inherit。

案例

<div class="flex-flow">
        <div class="flex">A</div>
        <div class="flex">B</div>
        <div class="flex">C</div>
        <div class="flex">D</div>
        <div class="flex">E</div>
        <div class="flex">F</div>
    </div>

  .flex-flow{
            display: flex;
            display: -webkit-flex;
            flex-flow: column-reverse wrap;
            width: 300px;
            height: 200px;
            margin: auto;
            background-color: red;
        }
        .flex{
            width: 60px;
            height: 60px;
            border: 1px #000000 solid;
            background-color: aqua;
            text-align: center;
            line-height: 60px;
            color: #ffffff;
        }

flex-flow属性可以设置
flow-direction属性里面的 row | row-reverse | column | column-reverse;
flex-warp属性里面的nowrap | wrap | wrap-reverse;
flex-flow是flex-direction和flex-warp里面值任意一个

也可以复合也flex-direction和flex-warp里面的任意两个值
复合写法必须是flex-direction和flex-warp两个值里面的任意两个而不是一个值里面的两个这样会报错的