direction是什么意思

css弹性盒⼦（flex-direction、flex-wrap、flex-flow篇）

⼀.什么是弹性盒⼦

弹性盒⼦是CSS3的⼀种新的布局模式。

CSS3弹性盒（FlexibleBox或flexbox），是⼀种当页⾯需要适应不同的屏幕⼤⼩以及设备类型时确保元素拥有恰当的⾏为的布局⽅式。

引⼊弹性盒布局模型的⽬的是提供⼀种更加有效的⽅式来对⼀个容器中的⼦元素进⾏排列、对齐和分配空⽩空间。

⼆.CSS弹性盒⼦内容

弹性盒⼦由弹性容器(Flexcontainer)和弹性⼦元素(Flexitem)组成。

弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。

弹性容器内包含了⼀个或多个弹性⼦元素。

注意：弹性容器外及弹性⼦元素内是正常渲染的。弹性盒⼦只定义了弹性⼦元素如何在弹性容器内布局。

弹性⼦元素通常在弹性盒⼦内⼀⾏显⽰。默认情况每个容器只有⼀⾏。

以下元素展⽰了弹性⼦元素在⼀⾏内显⽰，从左到右:

⽹页效果如下：

三.CSS弹性盒⼦常⽤属性

属性描述

flex-direction指定弹性容器中⼦元素排列⽅式

flex-wrap设置弹性盒⼦的⼦元素超出⽗容器时是否换⾏

flex-flowflex-direction和flex-wrap的简写

align-items设置弹性盒⼦元素在侧轴（纵轴）⽅向上的对齐⽅式

align-content修改flex-wrap属性的⾏为，类似align-items,但不是设置⼦元素对齐，⽽是设置⾏对齐

justify-content设置弹性盒⼦元素在主轴（横轴）⽅向上的对齐⽅式

本篇博客先分享flex-direction、flex-wrap、flex-flow的使⽤：

-direction属性

决定项⽬的⽅向。

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

属性值：

值描述

row默认值。元素将⽔平显⽰，正如⼀个⾏⼀样。

row-rever与row相同，但是以相反的顺序。

column元素将垂直显⽰，正如⼀个列⼀样。

column-rever与column相同，但是以相反的顺序。

-wrap属性

flex-wrap属性规定flex容器是单⾏或者多⾏，同时横轴的⽅向决定了新⾏堆叠的⽅向。

值描述

nowrap默认值。规定元素不拆⾏或不拆列。

wrap规定元素在必要的时候拆⾏或拆列。

wrap-rever规定元素在必要的时候拆⾏或拆列，但是以相反的顺序。

可以取三个值：

（1）nowrap(默认)：不换⾏。

（2）wrap：换⾏，第⼀⾏在上⽅。

（3）wrap-rever：换⾏，第⼀⾏在下⽅。

-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap