文字
分享

语法:

flex-flow:<' flex-direction '> || <' flex-wrap '>

默认值看各分拆属性

适用于:flex容器

继承性:无

动画性:否

计算值:指定值

取值:

  • <' flex-direction '>:定义弹性盒子元素的排列方向。

  • <' flex-wrap '>:控制flex容器是单行或者多行。

说明:

复合属性。设置或检索弹性盒模型对象的子元素排列方式。
  • 对应的脚本特性为flexFlow

兼容性:

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-10.02.0-27.04.0-20.06.015.0+-webkit-6.0-6.12.1-4.318.0-19.0
11.028.0+21.0+-webkit-6.1+-webkit-17.0+7.0+-webkit-4.4+20.0+-webkit-
29.0+9.0+9.0+28.0+

示例:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>flex-flow_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}

.box{

    display:-webkit-flex;

    display:flex;

    width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}

.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}

#box{

    -webkit-flex-flow:row nowrap;

    flex-flow:row nowrap;

}

#box2{

    -webkit-flex-flow:row wrap-reverse;

    flex-flow:row wrap-reverse;

}

#box3{

    height:220px;

    -webkit-flex-flow:column wrap-reverse;

    flex-flow:column wrap-reverse;

}

</style>

</head>

<body>

<h1>flex-flow示例:</h1>

<h2>flex-flow:row nowrap</h2>

<ul id="box" class="box">

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

<h2>flex-flow:row wrap-reverse</h2>

<ul id="box2" class="box">

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

<h2>flex-flow:column wrap-reverse;</h2>

<ul id="box3" class="box">

    <li>a</li>

    <li>b</li>

    <li>c</li>

</ul>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例


上一篇:flex-basis下一篇:flex-direction