逍遥阁

css弹性布局

关键词: css flex

css弹性布局

### 父容器

```
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: flex-start;
```

### justify-content(水平方向上的排列)

flex-start 整体靠左，右侧可能出现空白

flex-end 整体靠右，左侧可能出现空白

center 整体居中，左右两侧可能出现空白

space-evenly n个元素有n+1个间隙，span=剩余宽度/(n+1)，每个间隙是一样的宽度

space-around n个元素有n+1个间隙，span=剩余宽度/n，元素间的间隙为span，首尾元素和容器边缘的间隙为span/2(其实就是元素两边的间隙都一样，第一个元素的右边和第二个元素的左边挨在一起是2份间隙，其他的类似)

space-between n个元素有n-1个间隙，span=剩余宽度/(n-1)，元素间的间隙为span，首尾元素和容器边缘的间隙为0

### align-content(垂直方向上的排列)

flex-start 整体靠上，底部可能出现空白

flex-end 整体靠下，头部可能出现空白

center 整体居中，上下两侧可能出现空白

space-evenly 参考水平方向上的排列行为

space-around 参考水平方向上的排列行为

space-between 参考水平方向上的排列行为

stretch 默认值，n行有n个间隙，span=剩余高度/n，第一行与容器边缘间隙为0，最后一行与容器边缘间隙为span，每一行的间隙为span

### align-items

这个属性指的是"把某一行的元素像冰糖葫芦一样串起来，元素之间垂直方向上的对齐方式，当元素的高度不一致时可以看出效果，如果高度一致则看不出效果"

flex-start 顶部对齐

flex-end 底部对齐

center 居中对齐

### 子元素

```
flex: 占比系数
```

### 测试代码

```
<!DOCTYPE html>
<html>
<head>
    <title>flex</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <style>
        .box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-evenly;
            align-content: space-evenly;
            width: 480px;
            height: 480px;
            border: 1px solid red;
        }

.item {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid green;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>
```

admin
2021-08-21 14:30:17
css

文章分类

文章标签

文章归档

友情链接

css弹性布局