“弹性盒子”一维布局系统(补充)——WEB开发系列31

2024-09-06 23:20

本文主要是介绍“弹性盒子”一维布局系统(补充)——WEB开发系列31,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

弹性盒子是一种一维布局方法,用于根据行或列排列元素。元素可以扩展以填补多余的空间,或者缩小以适应较小的空间,为容器中的子元素提供灵活的且一致的布局方式。


一、什么是弹性盒子?

CSS 弹性盒子(Flexible Box Layout,简称 Flexbox)是 CSS3 中引入的一种布局模式,提供一种有效的方式来布局、对齐和分配容器内空间,特别是在动态和复杂的应用界面中。


1、弹性盒子的基本概念

  • 弹性容器(Flex Container):通过设置 ​​display: flex​​ 或 ​​display: inline-flex​​ 创建,成为弹性盒子的上下文。
  • 弹性项目(Flex Items):弹性容器中的直接子元素,它们的布局和行为会受到弹性容器的控制。

2、Flexbox 的优势

  1. 易于实现响应式布局:无论屏幕大小,Flexbox 都能轻松处理元素的排列和对齐。
  2. 空间分配的灵活性:能够方便地调整子元素大小和位置,以适应不同浏览器窗口或设备。
  3. 对齐和排序更直观:使用 Flexbox 可以简化项目的对齐方式及其在容器内的显示顺序。

我们先来看看一个简单的示例,包含多个子元素的弹性盒子。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 示例</title><style>.container {display: flex;  /* 设置为弹性盒子 */border: 1px solid #ccc; /* 添加边框 */padding: 10px;}.item {background-color: #4CAF50;color: #fff;padding: 15px;margin: 5px; /* 为每个项添加间距 */flex: 1; /* 所有项均等分配空间 */}</style>
</head>
<body><div class="container"><div class="item">项目 1</div><div class="item">项目 2</div><div class="item">项目 3</div></div>
</body>
</html>

我们创建了一个弹性盒子容器 ​​.container​​,并包含了三个子元素(弹性项目)。通过设置 ​​display: flex​​​,子项将自动适应容器的宽度。


二、指定元素的布局为 Flexible

要将元素的布局指定为弹性盒子,只需在 CSS 中为容器添加 ​​display: flex​​​。这告诉浏览器将该元素视为弹性容器。

.container {display: flex; /* 创建弹性容器 */
}

通过这种设置,容器内部的所有子元素都会自动成为弹性项目,并享有 Flexbox 提供的布局能力。


三、Flex 模型说明

Flexbox 的基本结构可以总结为两个部分:弹性容器和弹性项目。

  1. 弹性容器:容器是 Flexbox 布局的基础。它控制了如何排列其内部的弹性项目。
  2. 弹性项目:容器里面的元素。在大多数情况下,只有容器的直接子元素才是弹性项目。

当元素表现为 flex 框时,它们沿着两个轴来布局:

主轴(main axis)是指沿着弹性盒子(flex item)放置方向延伸的轴,可以是页面上的横向行或纵向列。主轴的起点和终点分别称为主起点(main start)和主终点(main end)。

交叉轴(cross axis)则是与主轴垂直的方向,其起点和终点被称为交叉起点(cross start)和交叉终点(cross end)。

当父元素设置为 ​​display: flex​​ 时,它被称为弹性容器(flex container)。而在该容器中表现为弹性盒子的元素被称为弹性项(flex item)。


四、列还是行?

默认情况下,Flexbox 将项目在行的方向排列。然而,开发者可以使用 ​​flex-direction​​ 属性设置项目在容器中的排列方向,这个属性可以取以下值:

  • row(默认值):项目在水平方向上从左到右排列。
  • row-reverse:项目在水平方向上从右到左排列。
  • column:项目在垂直方向上从上到下排列。
  • column-reverse:项目在垂直方向上从下到上排列。

示例:改变排列方向

.container {display: flex;flex-direction: column; /* 垂直排列 */
}

通过更改 ​​flex-direction​​​ 属性,项目的排列方式从水平变为垂直。


五、换行

有时,弹性项目的总宽度可能会超过容器的宽度。在这种情况下,默认情况下,Flexbox 会缩小弹性项目以适应容器。为了允许换行,可以使用 ​​flex-wrap​​ 属性进行设置。

  • nowrap(默认值):所有项目在单行中显示。
  • wrap:允许根据容器的宽度换行。
  • wrap-reverse:反向换行,最后一行显示在最上面。

示例:使用换行

.container {display: flex;flex-wrap: wrap; /* 允许换行 */
}

此设置让弹性项目在容器宽度不足时自动换行。


六、flex-flow 缩写

​flex-flow​​ 是 ​​flex-direction​​ 和 ​​flex-wrap​​ 的缩写。可以同时设置方向以及换行行为。

示例:使用 flex-flow

.container {display: flex;flex-flow: row wrap; /* 水平排列并允许换行 */
}

通过这种方式,容器内的项目将水平排列并且在不足容纳时自动换行。


七、Flex 项的动态尺寸

CSS 弹性盒子允许用户动态地分配项目的空间。这个功能依靠 ​​flex​​ 属性,它是 ​​flex-grow​​、​​flex-shrink​​ 和 ​​flex-basis​​ 的缩写:

  • flex-grow:定义项目的放大比例,默认为 0,表示不放大。
  • flex-shrink:定义项目的缩小比例,默认为 1,也就是说,项目能够缩小以适应容器。
  • flex-basis:定义项目的初始大小,默认为 ​​auto​​,项目的大小会基于内容。

示例:使用 flex 属性

.item-1 {flex: 2; /* 占 2 份空间 */
}
.item-2 {flex: 1; /* 占 1 份空间 */
}
.item-3 {flex: 1; /* 占 1 份空间 */
}

示例中,item-1 将占据比其他两个项目更多的空间。


八、flex:缩写与全写

使用 ​​flex​​ 属性的缩写格式,即可以同时设置 ​​flex-grow​​、​​flex-shrink​​ 和 ​​flex-basis​​:

.item {flex: 1; /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

这种缩写方式让我们在 CSS 中显得更为简洁和清晰。


九、水平和垂直对齐

Flexbox 允许开发者轻松实现元素的对齐,包括水平和垂直对齐。


1、justify-content(水平对齐)

​justify-content​​ 属性控制项目在主轴上的对齐方式,常用值包括:

  • flex-start:项目从容器的起始位置对齐。
  • flex-end:项目从容器的结束位置对齐。
  • center:项目在主轴中心对齐。
  • space-between:项目之间的间距均等。
  • space-around:项目间距相等且与容器边缘的间距相等。

示例:使用 justify-content

.container {display: flex;justify-content: center; /* 项目居中对齐 */
}

2、align-items(垂直对齐)

​align-items​​ 属性控制项目在交叉轴上的对齐方式,常用值包括:

  • flex-start:项目在交叉轴上端对齐。
  • flex-end:项目在交叉轴下端对齐。
  • center:项目在交叉轴中心对齐。
  • baseline:项目基线对齐。
  • stretch:项目拉伸以填满容器的高度。

示例:使用 align-items

.container {display: flex;align-items: stretch; /* 项目占满容器的高度 */
}

通过这两个对齐属性,可以轻松地实现不同的布局需求。


十、Flex 项排序

Flexbox 允许我们对项目的显示顺序进行重新排列,通过 ​​order​​ 属性来实现。默认值为 0,值越小的项目显示顺序越靠前。

示例:使用 order 属性

.item-1 {order: 2; /* 移到第二 */
}
.item-2 {order: 1; /* 移到第一 */
}
.item-3 {order: 3; /* 保持在第三 */
}

在这段代码中,虽然 ​​item-1​​ 在 HTML 结构中是第一个,但由于设置了 ​​order​​​ 属性,它将显示在第二。


十一、Flex 嵌套

在实际开发中,我们经常需要将一个弹性盒子嵌套在另一个弹性盒子内。这样可以实现复杂的布局。

示例:弹性盒子嵌套

<div class="outer-container"><div class="inner-container"><div class="item">内层项目 1</div><div class="item">内层项目 2</div></div><div class="item">外层项目 1</div>
</div>
.outer-container {display: flex; /* 外层弹性容器 */
}.inner-container {display: flex; /* 内层弹性容器 */flex-direction: column; /* 垂直排列 */
}

通过在容器内嵌套另一个弹性容器,我们可以得到更复杂的布局。


十二、跨浏览器兼容性

Flexbox 在现代浏览器中得到了良好的支持,但在某些老旧浏览器(如 IE 10 和更早的版本)中可能会遇到问题。以下是一些提供跨浏览器兼容性的建议:

使用浏览器前缀:在开发需要兼容旧版浏览器的应用时,可以使用浏览器前缀(如 ​​-ms-​​、​​-webkit-​​)来确保 Flexbox 特性正常工作。

利用 CSS 重置或前缀库:可以使用像 Autoprefixer 这样的工具自动添加所需的前缀。


为帮助读者巩固所学知识,以下是两个综合练习题。

题 1:

创建一个弹性容器,其中包含 5 个项,要求如下:

  • 容器为水平排列,项之间的间距均等。
  • 项的宽度动态变化,第一个项占两倍的宽度。

代码示例

<div class="flex-container"><div class="flex-item">项 1</div><div class="flex-item">项 2</div><div class="flex-item">项 3</div><div class="flex-item">项 4</div><div class="flex-item">项 5</div>
</div>
.flex-container {display: flex; /* 弹性盒子 */justify-content: space-between; /* 项之间均等间距 */
}.flex-item {background: #4CAF50;color: white;padding: 15px;flex: 1; /* 默认宽度相同 */
}.flex-item:nth-child(1) {flex: 2; /* 第一个项宽度为两倍 */
}

题 2:

创建一个嵌套的弹性盒子布局,其中外层容器水平排列,内层容器垂直排列,内外层项目均需居中对齐。

代码示例

<div class="outer-container"><div class="inner-container"><div class="inner-item">内层项目 1</div><div class="inner-item">内层项目 2</div></div><div class="outer-item">外层项目 1</div>
</div>
.outer-container {display: flex; /* 外层为弹性盒子 */justify-content: center; /* 水平居中对齐 */align-items: center; /* 垂直居中对齐 */
}.inner-container {display: flex; /* 内层为弹性盒子 */flex-direction: column; /* 垂直排列 */justify-content: center; /* 垂直居中 */
}.inner-item, .outer-item {background: #4CAF50;color: white;padding: 15px; 
}

如有表述错误及欠缺之处敬请指正补充。

这篇关于“弹性盒子”一维布局系统(补充)——WEB开发系列31的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1143408

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务,目标是自动识别图像中的对象类别。通过卷积神经网络(CNN)等深度学习技术,我们可以构建高效的图像分类系统,广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统,包括环境

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听