flex 布局案例

最新推荐文章于 2024-01-31 15:10:29 发布

原创最新推荐文章于 2024-01-31 15:10:29 发布 · 658 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Flex布局的基本用法，包括无Flex布局的静态排列、启用Flex布局后的水平方向排列、宽度自适应及自定比例分配、反向排序以及元素的水平居中和尾部对齐等常见应用场景。通过实例代码展示了每种布局效果，是理解与掌握Flex布局的良好参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.无flex布局的

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
	</body>
</html>

.container {
    /* display: flex; */
}
.box {
   width: 100px;
   height: 100px; 
}
.box:nth-child(1) {
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

水平方向

2.使用了flex布局

在这里插入图片描述

.container {
    display: flex;
}
.box {
   width: 100px;
   height: 100px; 
}
.box:nth-child(1) {
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

2.宽度自适应flex

在这里插入图片描述

.container {
    display: flex;
}
.box {
    flex: 1;
    /* width: 100px; */
    height: 100px; 
    border: black solid 1px;
}
.box:nth-child(1) {
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

3.自定比例的flex

在这里插入图片描述

.container {
    display: flex;
}
.box {
    flex: 1; /* 默认都是1 */
    /* width: 100px; */
    height: 100px; 
    border: black solid 1px;
}
.box:nth-child(1) {
    flex: 4;/* 在第一个这里添加比例 */
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

4.反向排序

在这里插入图片描述

.container {
    display: flex;
    flex-direction: row-reverse; /* 使其反向排序 带有 reverse 的参数会返向排序 */
}
.box {
    flex: 1;
    /* width: 100px; */
    height: 100px; 
    border: black solid 1px;
}
.box:nth-child(1) {
    flex: 4;
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

水平居中

在这里插入图片描述

.container {
    display: flex;
    /* flex-direction: row-reverse; */ /* 返向排序 */
    justify-content: center; /* 水平方向居中 */
}
.box {
    /* flex: 1; */
    width: 100px;
    height: 100px; 
    border: black solid 1px;
}
.box:nth-child(1) {
    /* flex: 4; */
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}

尾部

在这里插入图片描述

.container {
    display: flex;
    justify-content: flex-end; /* 尾部 */
}
.box {
    /* flex: 1; */
    width: 100px;
    height: 100px; 
    border: black solid 1px;
}
.box:nth-child(1) {
    /* flex: 4; */
    background-color: blue;
}
.box:nth-child(2) {
    background-color: red;
}
.box:nth-child(3) {
    background-color: green;
}
.box:nth-child(4) {
    background-color: yellow;
}