flex-direction-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

flex-direction作用：子元素在父元素盒子中的排列方式

| 属性值   |  作用 |
| :------------ | :------------ |
| row | 默认值，按从左到右的顺序显示  |
| 默认值，按从左到右的顺序显示  | 与row相同，以相反的顺序显示  |
| column  |  将item垂直显示，按从上到下的顺序 |
| column-reverse  | 与column相同，但顺序相反  |

示例：
父元素宽度500px，4个子元素，每个100px

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div0{
            width:500px;
            background-color: violet;
            /* 父元素flex布局 */
            display:flex;
            /* 布局方向，水平，水平反转，竖向，竖向反转 */
            flex-direction: row;
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
        }
        #div0 div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
```

示例二：父元素宽度300px，4个子元素分别为100px,当父元素宽度不够时，子元素会自动缩小：

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div0{
            width:300px;
            background-color: violet;
            /* 父元素flex布局 */
            display:flex;                    
        }
        #div0 div{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
```

![](/uploads/images/20230421/6690c5cac80029de393c74aa92df0d91.png)

子元素的宽度为父元素宽度均分，即300/4 = 75

**如果子元素不给设置100px的宽度，此时还会平均分配宽度吗？**
不会，子元素的宽度将为内容的宽度，不会自动缩小会扩大。

该分类下的相关小册推荐：

WebGL开发指南

web前端面试完全指南

uniapp快速入门与实战

vue高级应用开发与构建