网页布局，弹性布局和grid布局

_忆拾

已于 2022-07-26 18:54:40 修改

阅读量205

点赞数 1

分类专栏：笔记文章标签： css 前端 html

于 2022-07-26 17:35:33 首次发布

本文链接：https://blog.csdn.net/weixin_57332596/article/details/125999637

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

基础分布

一般分为头部区域、菜单导航区域、内容区域、底部区域

flex弹性布局

采用flex布局的元素，成为flex容器(flex container)，简称容器。他的所有子元素自动成为容器成员，成为Flex项目，简称项目布局原理就是通过给父盒子添加flex属性，用来控制盒子的位置和排列方式。

设置为弹性布局之后子元素的float(浮动)、clear(清除浮动)、vertical-align(垂直对齐方式)都将会失效;

父元素设置属性

没有设置弹性布局时

设置弹性布局后

display:flex; 设置弹性布局

与浮动类似但并不会脱离普通文档流

主轴对齐分布方式

justify-content:

样式值：

flex-start 靠左边开始位置对其

flex-end 靠右边结束位置对其

space-between 两端对齐平均分布

space-around 平均分布

align-items: 侧轴对齐方式

样式值:

flex-start 开始位置顶部对齐

flex-end 结束位置底部对齐

center 纵轴居中对齐

baseline 第一行文字的基线对齐

stretch 拉伸高度 //不需要设置子元素高度

flex-direction: 项目的排列方式

样式值：

column 改为侧轴

column-reverse 侧轴子元素顺序反转

row 改为主轴

row-reverse 主轴子元素顺序反转

flex-warp: 换行

样式值：

no-warp 不换行

warp 换行

warp-reverse 换行第一行在下边

align-content: 侧轴分布方式针对子元素对齐方式

样式值：

flex-start 元素开始位置对齐顶部对齐

flex-end 元素结束位置对齐底部对齐

center 居中换行后中间没有间距

stretch 拉伸宽度 //不需要设置子元素宽度

space-between 两端对齐平均分布

space-around 平均分布

子元素（项目）设置属性

order:0; 控制子元素的排列顺序默认为0 数值越小排名越靠前

flex:;

0 1 auto

align-self:; 单个子元素的对齐方式

样式值：

auto 自适应

flex-start 顶部对齐

flex-end 底部对齐

center 居中

baseline 根据第一行文字基线进行对齐

stretch 拉伸

grid布局

以格子形式，将页面分为类似于表格、网格，再进行区域的分配

父元素样式

display:grid; 将元素设为grid布局

grid-template-coumns:1fr; 列 1fr代表网格一列

grid-template-rows:50px ; 行单位px

子元素样式

grid-column-start:1; 从左向右第一条网格线

grid-column-end:4; 最后一条网格线

grid-row-start:1; 从上到下第一条网格线

grid-row-end:4; 最后一条网格线

row-gap:10px; 行间隙

column-gap:10px; 列间隙

练习

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        main {
            width: 800px;
            height: 500px;
            border: 1px solid black;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 50px auto 50px;
        }

        .box_1 {
            background-color: red;
            grid-column-start: 1;
            grid-column-end: 4;
        }

        .box_2 {
            background-color: green;
            grid-column-start: 1;
            grid-column-end: 1;
        }

        .box_3 {
            background-color: yellow;
            grid-column-start: 2;
            grid-column-end: 4;
        }

        .box_4 {
            background-color: blue;
            grid-column-start: 1;
            grid-column-end: 4;
        }
    </style>
</head>

<body>
    <main>
        <div class="box_1"></div>
        <div class="box_2"></div>
        <div class="box_3"></div>
        <div class="box_4"></div>
    </main>
</body>

</html>