前端页面布局

最新推荐文章于 2024-07-31 14:35:30 发布

智芝星

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量101

点赞数

分类专栏：深挖css 文章标签：前端 css css3

本文链接：https://blog.csdn.net/qq_45750263/article/details/127797844

版权

深挖css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

flex弹性盒子布局

设置父元素的display为flex，即可将父元素设置为弹性盒子，在这个弹性盒子上有一下几个重要的属性
flex-direction:row(默认横向)/column(纵向)
align-items:stretch(交叉轴拉伸填充)/center/flex-end/flex-start
justy-content:flex-start(默认，头对齐排列)/flex-end(尾对齐排
列)/center/space-between/space-around/space-evenly
flex-wrap：wrap(超出允许换行)/nowrap
作为子元素有如下几个重要属性设置
flex-grow：在有空闲空间时元素的拉伸比例
flex-shrink:在溢出时元素的收缩比例
align-self：子元素自己的交叉轴排列方式

<!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>
</head>
<body>
    <div class="flexContainer">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

    </div>
</body>
</html>
<style>
    div{
        border: 1px solid black;
    }
    .flexContainer{
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .flexContainer div{
        height: 300px;
        width: 30vw;
    }
</style>

在这里插入图片描述

网格布局

网格布局是把网页风格成多个网格进行布局，通过设置display为grid来开启网格布局，然后设置grid-template-columns来设置列，比如设置1fr 1fr 1fr,则其会等比例的将网页分成3列，你也可以设置每一列的宽度，中间用空格隔开。现在的行的高度是由内容撑开的，可以通过grid-auto-rows来设置行高度，建议在确定内容时候设置高度，不然会导致内容高度大于行高而引起溢出。还可以通过grid-gap来设置每个格子之间的空隙
另外，内部的元素可以通过grid-column和grid-row来设置该元素该如何占用格子。
grid-column：start/end（占用从start列到end列之前的格子)
grid-row：start/end（占用从start行到end行之前的格子）

<!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>
</head>
<body>
    <div class="container">
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt accusantium sapiente in quis consequatur amet possimus eos nihil cupiditate optio id fugit a fugiat commodi perferendis, est dicta quo? Aperiam?</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>
<style>
    .container div{
        border: 1px solid black;
    }
    .container div:nth-child(1){
        grid-column: 1/3;
        grid-row: 1/3;
    }
    .container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
</style>

在这里插入图片描述

多栏式布局

多栏布局较为简单，就是将网页分成多列进行布局通过设置column-count 来设置列数，或者使用column-width来设置列的宽度，使用column-gap来设置每列之间的间隔。

<!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>
</head>
<body>
    <div class="container">
        <div>a</div>
        <div>a</div>
        <div>a</div>
    </div>
</body>
</html>
<style>
    .container div{
        border: 1px solid black;
    }
    .container {
        column-count: 3;
        column-gap: 100px;
    }

</style>

在这里插入图片描述

未完待续

智芝星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端页面布局

设置父元素的display为flex，即可将父元素设置为弹性盒子，在这个弹性盒子上有一下几个重要的属性:row(默认横向)/column(纵向):stretch(交叉轴拉伸填充)/center/flex-end/flex-start:flex-start(默认，头对齐排列)/flex-end(尾对齐排列)/center/space-between/space-around/space-evenly：wrap(超出允许换行)/nowrap作为子元素有如下几个重要属性设置：在有空闲空间时元素的拉伸比例。
复制链接

扫一扫

专栏目录