随笔- 3 文章- 0 评论- 0 阅读- 43

css布局

布局

弹性布局：

关键字：display:flex
justify-content:space-between 两端对齐，中间自适应
justify-content:space-around 均匀分布，两边距离等于中间间距
justify-content:space-evenly 平等均匀分布，两边距离是一样的
justify-content:flex-start 默认分布，从弹性开始的地方
justify-content:flex-end 从弹性结束的地方分布
flex-direction：row 行排列把row换成row-reverse会实现反转
flex-direction：column 竖排列把column换成column-reverse同样会实现反转
flex-items-wrap:nowrap 控制当前不换行把nowrap换成wrap就是换行
align-items:center 竖向排列方式注意！当前父盒子必须有一定的高度
align-items:flex-start 竖向排列默认从弹性开始
align-items:flex-end 默认弹性结束分布
align-content:center 竖向紧密排列必须要搭配上面的换行使用
align-items 垂直方向排列居中这个是垂直方向松散排列两边空出来的距离等于中间的距离

多列布局：

column-count 定义分几列
column-rule 定义用什么线
column-rule-width 设置线的粗细

css的代码

.box2{
    height: 800px;
    margin: 0px auto;
    /* 弹性布局 */
    display: flex;
    /* 1. 向两端对齐，中间自适应 */
    justify-content: space-between;
    /* 2. 均匀分布，两边空出来的距离等于中间距离 */
    justify-content: space-around;
    /* 3. 平等均匀分布，距离完全一样 */
    justify-content: space-evenly;
    /* 4. 默认从弹性开始的地方分布 */
    justify-content: flex-start;
    /* 5. 从弹性结束的地方分布 */
    justify-content: flex-end;
    /* 排列方式是按照行还是按照列，默认是正序行（row），reverse：反转布局 */
    /* 6. 行的倒序 */
    flex-direction: row-reverse;
    /* 7. 列的倒序 */
    flex-direction: column-reverse;
    /* 8. 换行，默认不换行（nowrap），只要看到wrap就是换行 */
    flex-wrap: wrap;
    /* 竖向排列方式 */
    /* 当前父盒子必须有一定高度 */
    /* 9. 竖向中间分布，垂直方向松散排列，两边空出来的距离等于中间距离 */
    align-items: center;
    /* 10. 默认弹性开始分布 */
    align-items: flex-start;
    /* 11. 默认弹性结束分布 */
    align-items: flex-end;
    /* 12. 必须搭配换行使用（flex-wrap: wrap;）垂直方向紧密排列 */
    align-content: center;
}

html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css01.css">
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">1</div>
            <div class="box3">2</div>
            <div class="box3">3</div>
            <div class="box3">4</div>
            <div class="box3">5</div>
            <div class="box3">6</div>
            <div class="box3">7</div>
            <div class="box3">8</div>
            <div class="box3">9</div>
        </div>
    </div>
</body>
</html>