CSS-布局-flex

不会叫的狼

已于 2025-02-05 10:51:48 修改

阅读量1k

点赞数 19

分类专栏： Vue 文章标签： css

于 2024-06-07 17:39:43 首次发布

本文链接：https://blog.csdn.net/weixin_40017062/article/details/139523317

版权

Vue 专栏收录该内容

23 篇文章

订阅专栏

CSS3 新增了弹性盒子模型( Flexible Box 或 FlexBox )，是一种新的用于在 HTML 页面实现布局的方式。使得 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。

基本概念

容器：使用 display:flex 或 display:inline-flex 声明的元素，称为 Flex 容器（flex container），简称 容器
项目：容器 中所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 项目
主轴：项目沿其一次排列的轴被称为 主轴。
侧轴：垂直于主轴的轴被称为 侧轴。

容器的属性

flex-direction
- 定义了主轴的方向
  - 🌟row：主轴为水平方向，起点在左端（默认）
  - row-reverse：主轴为水平方向，起点在右端
  - column：主轴为垂直方向，起点在上沿
  - column-reverse：主轴为垂直方向，起点在下沿
flex-wrap
- 默认情况，所有项目会在一行显示，如需换行，使用 flex-wrap
  - 🌟nowrap：不换行（默认）
  - wrap：换行，第一行在上方
  - wrap-reverse：换行，第一行在下方
flex-flow
- 该属性是 flex-direction 和 flex-wrap 的简写，默认值为 row nowrap，水平排列，不换行。
justify-content
- 定义了项目沿着 主轴线 的对齐方式
  - flex-start: 项目左对齐（默认）
  - flex-end: 项目右对齐
  - 🌟center: 项目居中对齐
  - space-between: 项目两端对齐，容器首尾不留距离，项目之间的间隔都相等
  - space-around: 项目两端对齐，容器首尾留有距离
align-items（适用于不换行的情况）
- 定义了项目所在 侧轴线 的对齐方式
  - flex-start: 侧轴起点对齐，如果 flex-direction:row，则项目顶部对齐
  - flex-end: 侧轴终点对齐，如果 flex-direction:row，则项目尾部对齐
  - 🌟center: 项目居中对齐
  - baseline: 项目的 第一行文字的基线 对齐
  - stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）
align-content（多行情况时适用）
- 定义了项目所在侧轴线的对齐方式
  - flex-start: 侧轴起点对齐
  - flex-end: 侧轴终点对齐
  - 🌟center: 侧轴居中对齐
  - space-between: 两端对齐，容器首尾不留距离
  - space-around: 两端对齐，容器首尾留有距离
  - stretch: 如果项目 未设置高度 或者 设为auto，拉伸与容器同高（默认）

项目属性

order：项目的排列顺序
- 数值越小，排列越靠前，可以为负值
  - order:0，保持项目原来的位置（默认）
flex-grow（扩大）：定义项目的放大比例
- 默认为0：如果容器存在剩余空间，保持原大小，不放大
- 项目 flex-grow 属性都为 1：项目平均分配剩余空间
- 某个项目 flex-grow 属性为 2，其他项目都为 1，那么为 2 的项目宽度为 1 的 2 倍
flex-shrink（缩小）：定义项目的缩小比例
- 默认为1：如果容器空间不足，项目缩小
- 项目 flex-shrink 属性都为 1，当容器空间不足时，所有项目等比缩小
- 某个项目 flex-shrink 属性为 0，其他项目都为 1，当容器空间不足时，为 0 的项目不缩小
flex-basis：在分配空间之前，项目的主轴空间，相当于我们设置的 width。
- 默认值：auto，保持项目的本来大小，不作任何宽度改变
- 可以定义项目的宽度（如200px）
- 也可以设置 flex-basis:10%，将占据空间的10%
flex（常用）：flex-grow flex-shrink flex-basis 的缩写
- 默认值：0 1 auto，不放大，但缩小；
- auto（1 1 auto）：等分放大缩小
- none（0 0 auto）：不放大，不缩小
- 🌟flex:1 （1 1 0%）：相当于只设置了 flex-grow
- 三者区别见 📖 flex:1、flex:auto区别
align-self：定义项目在侧轴的对齐方式。该属性可覆盖 align-items 属性。
- 允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items 属性。
- 默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
- flex-start | flex-end | center | baseline | stretch 与 align-items 属性完全一致

📖 flex布局小案例

css 中 div 宽度和高度

在 CSS 中，div 元素的默认宽度是它父元素的 100%，默认高度是 0，因为 div 是块级元素。如果没有设置高度，div的高度将仅受内容影响。如果内容是内联元素，由 line-height 决定高度。

如果你想设置 div 的默认高度和宽度，你可以在 CSS 中指定它们。例如：

div {
  width: 200px; /* 设置宽度为200像素 */
  height: 100px; /* 设置高度为100像素 */
}

如果你想让 div 的高度和宽度根据其内容自动调整，你可以使用 width 和 height 属性的值 auto：

div {
  width: auto; /* 宽度根据内容自动调整 */
  height: auto; /* 高度根据内容自动调整 */
}

Flex弹性盒子尺寸特点

align-items、align-self

align-items 默认值是 stretch，如果项目 未设置高度 或者设为 auto，拉伸与容器同高。align-self默认值是 auto，继承父元素的 align-items 属性，也可以单独为项目设置属性。

<!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>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            display: flex;
			width: 400px;
            height: 200px;
            border: 1px solid #000;
        }
 
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
 
</html>

父容器有高度，子项目有宽度、有高度：子项目宽度=设置宽度，高度=设置高度
父容器有高度，子项目有宽度、无高度：子项目宽度=设置宽度，高度=在侧轴拉伸到和父容器一样高
父容器有高度，子项目无宽度、有高度：子项目宽度=内容的宽度，高度=设置高度
父容器有高度，子项目无宽度、无高度：子项目宽度=内容的宽度，高度=在侧轴拉伸到和父容器一样高

在这里插入图片描述

设置 align-items:center，如果项目未设置高度或者设为auto，高度为内容的高度。

<!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>侧轴对齐方式</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            display: flex;
			width: 400px;
            height: 200px;
            border: 1px solid #000;
			align-items:center;
        }
 
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
 
</html>

父容器有高度，子项目有宽度、有高度：子项目宽度=设置宽度，高度=设置高度
父容器有高度，子项目有宽度、无高度：子项目宽度=设置宽度，高度=内容的高度
父容器有高度，子项目无宽度、有高度：子项目宽度=内容的宽度，高度=设置高度
父容器有高度，子项目无宽度、无高度：子项目宽度=内容的宽度，高度=内容的高度

在这里插入图片描述

flex-grow、flex-shrink

设置 flex: 1;，子项目宽度会等分放大缩小。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
		width: 400px;
        height: 200px;
        border: 1px solid #000;
    }

    .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
		flex: 1;
    }
</style>

在这里插入图片描述

📌 引申：

处理内容溢出：
overflow: hidden 隐藏超出范围

登录页面

<!DOCTYPE html>
<html>
<head>
    <title>vue</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
#app {
  height: 98vh; 
  display: flex; 
  justify-content:center; 
  align-items:center; 
  background-color: #0f9876;
}
.mainBox {
  width: 50%;
  display: flex;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
}
.imgBox {
  flex: 1;
}
.loginBox {
  flex: 1;
  display: flex;
  justify-content:center;
  align-items:center;
}
</style>
<body>
 <div id="app">
	<div class="mainBox">
		<div class="imgBox">  
			<img src="F:\login.jpg" alt="" style="width: 100%; height: 100%;" >
		</div>
		<div class="loginBox" >
			<el-form :model="user" style="width: 80%;">
				<div style="font-size: 20px; font-weight: blod; text-align:center; margin-bottom: 20px;"> 欢迎登录后管管理系统 </div>
				<el-form-item prop="username">
                  <el-input prefix-icon="el-icon-user" size="medium" v-model="user.username" placeholder="请输入账号"></el-input>
                </el-form-item>
				<el-form-item prop="password">
                  <el-input prefix-icon="el-icon-lock" size="medium" show-password v-model="user.password" placeholder="请输入密码"></el-input>
                </el-form-item>
				<el-form-item>
                  <el-button type="primary" style="width: 100%;"> 登 录 </el-button>
                </el-form-item>
				<div style="display: flex" >
					<div style="flex: 1">还没有账号？请 <span style="color: #0f9876; cursor: pointer">注册</span></div>
					<div style="flex: 1; text-align:right;"><span style="color: #0f9876; cursor: pointer">忘记密码</span></div>
				</div>
			</el-form>
		</div>
	</div>
 </div>
</body>
<script>
var vm = new Vue({
    el: "#app",
    data: {
        user: {
			username: "",
			password: ""
		}
    },
    methods: {
        leftClick: function() {
            this.num--;
        },
        rightClick: function() {
            this.num++;
        }
    }
});
</script>
</html>