前端设计中的flex

在 UI（用户界面）设计和前端开发领域，flex 通常指的是 Flexbox（弹性盒子布局模型），它是一种用于为盒状模型提供最大灵活性的布局模式。以下为你详细介绍：

基本概念

Flexbox 旨在提供一种更高效的方式来布局、对齐和分配容器内项目之间的空间，即使它们的大小是未知的或动态的。使用 Flexbox 布局的主要思想是让容器有能力改变其项目的宽度、高度和顺序，以最佳方式填充可用空间。

相关术语

  • Flex 容器（Flex Container）：应用 display: flex 或 display: inline-flex 属性的父元素，它定义了一个 Flex 布局的上下文。
  • Flex 项目（Flex Item）：Flex 容器的直接子元素，它们会根据 Flexbox 的规则进行布局。
  • 主轴（Main Axis）：Flex 项目排列的主要方向，可以是水平（默认）或垂直。
  • 交叉轴（Cross Axis）：与主轴垂直的轴。

关键属性

容器属性

  • display：定义一个元素为 Flex 容器。
.container {
    display: flex; /* 块级 Flex 容器 */
    /* 或者使用 display: inline-flex; 行内级 Flex 容器 */
}
  • flex-direction：指定主轴的方向，决定 Flex 项目的排列方向。
.container {
    flex-direction: row; /* 默认值，水平从左到右排列 */
    /* 还可以使用 row-reverse、column、column-reverse */
}
  • flex-wrap：控制 Flex 项目是否换行。
.container {
    flex-wrap: nowrap; /* 默认值，不换行 */
    /* 还可以使用 wrap、wrap-reverse */
}
  • justify-content：定义 Flex 项目在主轴上的对齐方式。
.container {
    justify-content: flex-start; /* 默认值，项目从主轴起点开始排列 */
    /* 还可以使用 flex-end、center、space-between、space-around、space-evenly */
}
  • align-items：定义 Flex 项目在交叉轴上的对齐方式。
.container {
    align-items: stretch; /* 默认值，项目拉伸以填充交叉轴 */
    /* 还可以使用 flex-start、flex-end、center、baseline */
}
  • align-content：定义多行 Flex 项目在交叉轴上的对齐方式，当 flex-wrap 为 wrap 或 wrap-reverse 时生效。
.container {
    align-content: stretch; /* 默认值，多行项目拉伸以填充交叉轴 */
    /* 还可以使用 flex-start、flex-end、center、space-between、space-around */
}

项目属性

  • flex-grow：定义项目的放大比例，默认为 0，表示不放大。
.item {
    flex-grow: 1; /* 项目将按比例放大以填充剩余空间 */
}
  • flex-shrink：定义项目的缩小比例，默认为 1，表示当空间不足时项目会缩小。
.item {
    flex-shrink: 0; /* 项目不会缩小 */
}
  • flex-basis：定义项目在分配多余空间之前的初始大小，默认为 auto。
.item {
    flex-basis: 200px; /* 项目初始宽度为 200px */
}
  • flex：是 flex-grow、flex-shrink 和 flex-basis 的简写属性。
.item {
    flex: 1 1 auto; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}
  • align-self：允许单个项目覆盖 align-items 属性，定义该项目在交叉轴上的对齐方式。
.item {
    align-self: center; /* 该项目在交叉轴上居中对齐 */
}

应用场景

  • 导航栏布局：可以轻松实现导航项的水平或垂直排列，并且能够自适应不同屏幕尺寸。
  • 卡片布局：方便地控制卡片的排列和间距，使页面布局更加美观。
  • 表单布局：快速实现表单元素的对齐和分布。

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Title</title>
		<style>
			.box {
				width:400px;
				height:400px;
				border:1px solid black;
				margin:auto;
				display:flex;
				/*
				flex-direction:row;
				flex-wrap:wrap-reverse;*/ /* nowrap,wrap, wrap-reverse */
				flex-flow: row wrap-reverse;
				justify-content:space-evenly;
				align-items:baseline;
				align-content:space-evenly;
			}
			.box>div{
				width:100px;
				height:100px;
				background:pink;
				border:1px solid red;
			}
			.box div:nth-child(1) {
				padding-top:10px;
				order:3;
				flex-grow:1;
			}
			.box div:nth-child(2) {
				padding-top:15px;
				order:5;
				flex-grow:2;
			}
			.box div:nth-child(3) {
				flex-shrink:0;
			}
			.box div:nth-child(4) {
				padding-top:20px;
				order:0;
			}
			.box div:nth-child(5) {
				flex-shrink:2;
			}
		</style>
    </head>
    <body>
        <!--
		容器container：水平轴和垂直轴main axiis, cross axis
			起始位置：main start, cross start
			结束位置：main end, cross end
			默认按主轴排序
			main size
			cross size
			可以设置主轴为上下
			flex-direction:决定主轴的方向
				row:水平方向，左端起点
				row-reverse:水平方向，右端起点
				column:垂直方向，由上到下
				column-reverse:垂直方向，由下到上
			flex-wrap:
				nowrap
				wrap: 换行，第一行在上方
				wrap-reverse: 换行，第一行在下方
			flex-flow;flix-direction属性和flex-wrap属性的简写
			justify-content:主轴上的对齐方式		
				flex-start:起点对齐
				flex-end:终点对齐
				center:居中
				space-between:两端对齐，间隔相等
				space-around:每个项目间隔相等，间隔比变宽那个距离大一倍
				space-evenly:项目与项目之间，项目与边框之间间隔相等
			align-items:交叉轴上对齐方式
				flex-start:起点对齐
				flex-end:终点对齐
				center: 居中
				baseline:项目的第一行文字的基线对齐
				strech(默认值):如果项目未设置高度或设置为auto，将占满整个容器的高度
			align-content:定义多跟轴线的对齐方式，如果只有一根轴线，该属性不起作用
				flex-start:
				flex-end
				space-around
				space-evenly
				
		Item：
			order:项目的排列顺序，值越小，越靠前
			flex-grow： 项目的放大比例
			flex-shrink： 项目的缩小比例
			flex-basis：在分配多余空间之前，项目占据主轴空间
			flex： flex-grow flex-shrink flex-basis,后两个可选
			align-self： 单个项目与其他项目有不同的对齐方式，可覆盖align-items
		-->
		<div class="box">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
    </body>
</html>

学习微信小程序编程的demo

demo

posted @   荣--  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  从代码优化到团队协作，掌握软件开发的黄金法则
·  词向量入门---如何让计算机理解语言
·  弹性布局（display:flex;）属性详解
·  flex布局
·  flex强化学习
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
· 【译】Visual Studio 中新的强大生产力特性
· 2025年我用 Compose 写了一个 Todo App
点击右上角即可分享
微信分享提示