标签：flex 元素前端布局几种 content grid display 页面

前端页面常见的布局方式有以下几种

1、文档流 --内联元素从左往右排列，块级元素从上往下排列。
2、float（浮动）布局
3、position （定位）布局
4、display inline-block （行向）布局
5、margin 布局
6、display:flex 弹性布局
7、display:grid 栅格布局

1、文档流（正常流，也叫文档流）

内联元素从左往右排列，块级元素从上往下排列。

   <p>
        <span>111</span>
        <span>222</span>
        <span>333</span>
    </p>
    <div>
        <el-button size="small" @click="handleCancel()">提 交</el-button>
        <el-button size="small" @click="handleCancel()">返 回</el-button>
        <el-button size="small" @click="handleCancel()">重 置</el-button>
    </div>

这里div、p元素属于块级元素，每个元素单独占一行，span、el-button，属于内联元素，并列排，直到宽带不够，自动换行

2、float（浮动）布局

CSS传统的布局技术float 和 clear，用于实现多栏布局和处理浮动元素带来的影响，但有个缺点，会造成浮动塌陷，需要主动清除浮动。

   <div class="container clearfix">
        <div class="left-column">
            <h2>Left Column</h2>
            <p>This is the content of the left column.</p>
        </div>
        <div class="right-column">
            <h2>Right Column</h2>
            <p>This is the content of the right column.</p>
        </div>
    </div>
     <style>
        .container {
            width: 100%;
            overflow: auto; /* 清除浮动元素影响 */
        }

        .left-column {
            width: 30%;
            float: left;
        }

        .right-column {
            width: 70%;
            float: left;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>

在这个示例中，我们创建了一个包含两个栏目的容器，分别是左栏和右栏。我们使用 float 属性将这两个栏目浮动到左侧，以实现两栏布局。

为了清除浮动元素所带来的影响，我们使用了 clearfix 类。这是一种常见的做法，通过在父元素上添加一个伪元素并设置 clear: both; 来清除浮动。

在实际项目中，推荐使用更现代的布局技术，如 Flexbox 或 Grid，以便更轻松地创建复杂的布局，并避免 float 和 clear 带来的一些问题

3、position （定位）布局

position 是 CSS 属性之一，用于控制元素在页面上的定位方式。position 属性有多个可选值，每个值都会影响元素的定位方式和如何与其他元素交互。以下是常见的 position 属性值及其作用：

static：这是默认值，元素按照文档流布局，不受其他定位属性的影响。设置为 static 时，top、right、bottom 和 left 属性无效。
relative：元素相对于其原始位置进行定位，但仍保留文档流中的位置。您可以使用 top、right、bottom 和 left 属性来设置相对偏移。
absolute：元素相对于其最近的已定位的父元素进行定位，如果没有已定位的父元素，则相对于文档进行定位。元素从文档流中脱离，不会占据空间。也可以使用 top、right、bottom 和 left 属性来设置绝对定位。
fixed：元素相对于视口进行定位，即使页面滚动也不会改变其位置。常用于创建固定在页面上某个位置的导航栏、工具栏等。
sticky：元素在跨越特定阈值前为相对定位，之后变为固定定位。常用于创建在页面滚动时“粘性”定位的元素，比如表头

   .my-element {
    position: relative; /* 或其他position值 */
    top: 10px;
    left: 20px;
}

使用 position 属性时，务必注意元素的定位方式和影响范围，以确保您获得所需的布局效果。配合其他属性如 top、right、bottom 和 left，您可以更精确地控制元素在页面上的位置。但请谨慎使用 position 属性，以避免布局问题和复杂性。

4、display inline-block （行向）布局

display: inline-block; 是一种 CSS 属性值组合，用于在水平方向上创建行内块级元素。它结合了 display: inline; 和 display: block; 的特性，允许元素在同一行内显示，并且具有块级元素的盒模型特性。

使用 display: inline-block; 可以在不使用浮动或定位的情况下实现一些特定的布局需求，例如创建一行内的多个元素并允许设置宽度、高度和内外边距。

    <div class="box">
        <p>Box 1</p>
    </div>
    <div class="box">
        <p>Box 2</p>
    </div>
    <div class="box">
        <p>Box 3</p>
    </div>

    <style>
        .box {
            display: inline-block;
            width: 150px;
            height: 100px;
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
    </style>

示例中，我们创建了三个具有 display: inline-block; 样式的 div 元素，它们会在同一行内显示。每个 div 元素都具有设置的宽度、高度、内外边距和边框，且它们按照设定的间距排列。

display: inline-block; 常用于创建水平导航菜单、横向的卡片布局等。需要注意的是，由于它是行内块级元素，因此会受到行内元素的换行和空白字符影响。如果不想让它们在代码中产生额外的空白字符，可以将元素标签写在一行

5、margin 布局

使用 margin 进行布局是一种传统的 CSS 布局方法，以下是一个使用 margin 进行简单布局的示例，展示如何在一个容器中创建多个带有间距的块元素：

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
    .container {
        width: 100%;
        text-align: center; /* 居中块元素 */
    }
    .box {
        display: inline-block;
        width: 150px;
        height: 100px;
        margin: 10px;
        background-color: #ccc;
    }
</style>

创建了一个具有 .container 类的容器，以及三个具有 .box 类的块元素。每个 .box 元素都具有指定的宽度、高度和 margin。通过设置 display: inline-block;，这些块元素将在同一行内显示。

通过调整 .box 元素的 margin 值，您可以控制它们之间的间距。在这个例子中，每个块元素都具有 10px 的外边距，从而在它们之间创建了一定的间距

注：需要注意的是，使用 margin 布局可能会受到外边距折叠的影响，特别是在垂直方向上。在复杂布局中，可能需要额外的 CSS 或技巧来解决这些问题

6、display:flex 弹性布局

display: flex; 是 CSS 中的一个属性，用于创建灵活的盒子模型，使其更容易实现各种布局需求。Flexbox（弹性盒模型）是一种现代的 CSS 布局技术，适用于水平和垂直方向上的布局，具有响应式设计的优势

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<style>
   .container {
        display: flex;
        justify-content: space-between; /* 在容器内均匀分布子元素 */
    }
    .box {
        width: 150px;
        height: 100px;
        background-color: #ccc;
        margin: 10px;
    }
</style>

将.container 容器，并将其设置为 display: flex;。这使得容器内的子元素（.box 元素）成为一个弹性容器。我们还使用了 justify-content: space-between; 属性，将子元素在容器内均匀分布，创建了一种类似于多栏布局的效果。

使用 display: flex; 的优点包括更少的代码、更少的浮动、更少的清除浮动需求以及更灵活的布局控制

以下是一些常用的 Flexbox 属性：

容器属性（应用于父元素）
- display: 定义一个元素作为 Flex 容器。设置为 flex 会创建一个行级 Flex 容器，设置为 inline-flex 则会创建一个内联 Flex 容器。
- flex-direction: 定义 Flex 容器内项目的排列方向。可选值为 row（默认，水平排列）、column（垂直排列）、row-reverse 和 column-reverse。
- justify-content: 定义项目在主轴上的对齐方式。可选值有 flex-start、flex-end、center、space-between、space-around 等。
- align-items: 定义项目在交叉轴上的对齐方式。可选值有 flex-start、flex-end、center、baseline、stretch 等。
- align-content: 定义多根轴线的对齐方式（仅当项目在多行上排列时有效）。可选值有 flex-start、flex-end、center、space-between、space-around、stretch 等。
项目属性（应用于子元素）：
- order: 定义项目的排列顺序。数值越小，排列越靠前。
- flex-grow: 定义项目在剩余空间中的放大比例。
- flex-shrink: 定义项目在空间不足时的缩小比例。
- flex-basis: 定义项目的初始主轴尺寸。
- flex: 为 flex-grow、flex-shrink 和 flex-basis 的简写属性。
- align-self: 定义单个项目在交叉轴上的对齐方式，覆盖容器上的 align-items 设置。可选值有 auto、flex-start、 - flex-end、center、baseline、stretch 等。

这里只列了一部分属性，要深入了解 Flexbox，您可以参考 MDN 文档或其他 CSS 教程。

7、display:grid 栅格布局

display: grid; 是一种现代的 CSS 布局技术，用于创建二维网格布局。Grid 布局使得在水平和垂直方向上都能够非常灵活地进行布局。您可以将容器划分为行和列，并在交叉点上放置项目

以下是一些常用的 display: grid; 相关的属性：

（1）、grid-template-columns 设置列
（2）、grid-template-rows 设置行
（3）、grid-template-areas 定位空间
（4）、grid-template （1）和（2）和（3）组合使用缩写
（5）、grid-column-gap 设置列间隙
（6）、grid-row-gap 设置行间隙
（7）、grid-gap （5）和（6）组合使用缩写
（8）、justify-items 设置水平对齐内容位置
（9）、align-items 设置垂直对齐内容位置
（10）、justify-content
（11）、align-content

实例如下：

<template>
	<view class="content">
		<view class="one-feeds-box" v-for="(data,i) in showFeedsList">
			<view class="one-feed" v-for="(item,index) in data" :key="index" :class="index%6==0?(i%2==0?'feed-big-left':'feed-big-right'):''">
				<navigator url="">
					<img :src="item.cover" class="feed-content" mode="aspectFill" :lazy-load="true">
				</navigator>
			</view>
		</view>
	</view>
</template>

<style>
    .content{
	background-color: #fff;
	padding-bottom: 20upx;
	.one-feeds-box{
		outline: 1px solid gray;
		width: 704upx;
		margin: 4upx 22upx 0 22upx;
		display: grid;
		grid-template-columns: 232upx 232upx 232upx;
		grid-template-rows: 232upx 232upx 232upx;
		grid-row-gap: 4upx;
		grid-column-gap: 4upx;
		background-color: #dadada;
		.one-feed{
			position: relative;
			.feed-content{
				width: 232upx;
				height: 232upx;
				border: 1px solid #eee;
				border-radius: 4upx;
			}
			&.feed-big-left{
				grid-column-start: 1;
				grid-column-end: 3;
				grid-row-start: 1;
				grid-row-end: 3;
				background-color: #dadada;
				.feed-content {
					width: 466upx;
					height: 466upx;
					border: 1px solid #EEEEEE;
				}
			}
			&.feed-big-right {
				grid-column-start: 2;
				grid-column-end: 4;
				grid-row-start: 1;
				grid-row-end: 3;
				background-color: #DADADA;
				.feed-content {
					width: 466upx;
					height: 466upx;
					border: 1px solid #EEEEEE;
					}
				}
		}
		
	}
</style>

容器属性（应用于父元素）：
- display: 将元素设置为网格容器。设置为 grid 会创建一个块级网格容器，设置为 inline-grid 则会创建一个内联网格容器。
- grid-template-columns: 定义网格列的大小和数量。您可以指定像素、百分比、自动填充、网格轨道等值。
- grid-template-rows: 定义网格行的大小和数量，使用的值类似于 grid-template-columns。
  项目属性（应用于子元素）：
- grid-column: 定义项目所占的列数范围。例如，grid-column: 2 / 4; 表示项目占据第2列到第4列。
- grid-row: 定义项目所占的行数范围。类似于 grid-column，您可以设置起始和结束的行号。
- grid-area: 为项目同时定义网格行和列。可以将它们组合在一起，如 grid-area: 2 / 1 / 3 / 3;。
其他布局属性：
- grid-gap 或 gap: 定义网格行和列之间的间距。
- justify-items: 定义项目在单元格内的水平对齐方式。
- align-items: 定义项目在单元格内的垂直对齐方式。
- justify-content: 定义项目在网格容器内的水平对齐方式。
- align-content: 定义项目在网格容器内的垂直对齐方式。

使用 display: grid; 布局可以实现复杂的网格结构，包括自适应和响应式设计。您可以根据具体需求设置网格的行列，以及项目的位置和对齐方式。与 Flexbox 相比，Grid 布局在处理二维布局时更具优势。如需深入了解 display: grid; 布局，请查阅 MDN 文档或其他 CSS 教程。

以上7中页面布局在实际项目中都有所使用，推荐Flex 布局和 Grid 布局，都是现代 CSS 布局方式中非常流行的两种

1、Flex 布局相对于 Grid 布局更加灵活，列表、导航菜单之类的布局。
2、Grid 布局相对于 Flex 布局更加强大，比如网格式布局、多栏排版等，则建议选择 Grid 布局。    
需要注意的是，使用 Grid 布局的话，兼容性方面需要更加考虑。而 Flex 布局的兼容性比 Grid 布局更加良好。

标签：flex,元素,前端,布局,几种,content,grid,display,页面
From： https://www.cnblogs.com/hlrblog/p/17638417.html

前端页面常见的布局方式有以下几种

前端页面常见的布局方式有以下几种

1、文档流（正常流，也叫文档流）

2、float（浮动）布局

3、position （定位）布局

4、display inline-block （行向）布局

5、margin 布局

6、display:flex 弹性布局

以下是一些常用的 Flexbox 属性：

7、display:grid 栅格布局

以下是一些常用的 display: grid; 相关的属性：

以上7中页面布局在实际项目中都有所使用，推荐Flex 布局和 Grid 布局，都是现代 CSS 布局方式中非常流行的两种

相关文章

赞助商

阅读排行

前端页面常见的布局方式有以下几种

前端页面常见的布局方式有以下几种

1、文档流 （正常流，也叫文档流）

2、float（浮动）布局

3、position （定位）布局

4、display inline-block （行向）布局

5、margin 布局

6、display:flex 弹性布局

以下是一些常用的 Flexbox 属性：

7、display:grid 栅格布局

以下是一些常用的 display: grid; 相关的属性：

以上7中页面布局在实际项目中都有所使用，推荐Flex 布局和 Grid 布局，都是现代 CSS 布局方式中非常流行的两种

相关文章

赞助商

阅读排行

1、文档流（正常流，也叫文档流）