CSS——弹性盒子布局(display: flex)

CSS——弹性盒子布局(display: flex)

我们经常听说一种布局:Flexbox或者是弹性布局,它的全称叫做弹性盒子布局(Flexible Box Layout),那么它到底该如何实现呢?从我们熟悉的 display 属性开始。给元素添加 display: flex,该元素变成了一个弹性容器(flex container),它的直接子元素变成了弹性子元素(flex item)。那么最简单的弹性盒子布局就完成了,它具有以下的效果:

  • 弹性容器像块元素一样填满可用宽度(注意,这里只是弹性容器,即添加了display: flex的元素),高度由自身内容决定,但是弹性子元素不一定填满其弹性容器的宽度。
  • 弹性子元素默认是在同一行按照从左到右的顺序并排排列。
  • 弹性子元素高度相等,该高度由它们的内容决定。

当然,我们可以手动的设置它们的宽高,但是在Flexbox布局中,弹性是其最突出的属性,所有一般我们不建议这样做。在大致了解了它最显著的作用之后,下面我们来进行细致深入的学习。

基础概念

Flexbox布局中,有两根重要的轴线——主轴&副轴,其属性几乎都是围绕着这两根轴线来描述的。默认情况下,主轴是水平的,它的起点为最左侧,终点为最右侧,对应的,有一根与之垂直相交的副轴,它的起点是最上侧,终点是最下侧。当然,这些方向可以改变,我们稍后介绍。
在这里插入图片描述

相关属性

  1. flex-direction
    作用:决定主轴的方向(弹性子元素的排列方向)

    • row(默认值):水平,起始在左端
    • row-reverse:水平,起始在右端
    • column:竖直,起始在上沿
    • column-reverse:竖直,起始在下沿
      在这里插入图片描述
  2. flex-wrap
    作用:决定直接子元素是否换行以及如何换行

    • nowrap(默认):不换行
    • wrap:换行,第一行在上方
    • wrap-reverse:换行,第一行在下方
      在这里插入图片描述
  3. flex-flow
    作用:前面两个属性的简写,默认值为 row nowrap

  4. justify-content
    作用:决定弹性子元素在主轴上的对齐方式

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center:居中
    • space-between:两端对齐,弹性子元素之间的间隔相等
    • space-around:弹性子元素两侧的间隔相等,相邻之间的间隔会叠加
      在这里插入图片描述
  5. align-content
    作用:决定多行/列弹性子元素在交叉轴上的的对齐方式 (前提是要开启flex-wrap)

    • stretch(默认值):每行元素将会被拉伸,直至撑满整个交叉轴,每行/列之间的间隔相等
    • flex-start:与交叉轴起点对齐
    • flex-end:与交叉轴终点对齐
    • center:在交叉轴上居中对齐
    • space-between:与交叉轴两端对齐,弹性子元素之间的间距相等
    • space-around:弹性子元素两侧的间隔相等,相邻之间的间隔会叠加
      在这里插入图片描述
  6. flex-items
    作用:决定单行/列弹性子元素在交叉轴上的对齐方式

    • stretch(默认值):如果没有设置高度/高度设置为auto,那么将撑满整个盒子
    • flex-start、flex-end、center属性值的效果同上
    • baseline:项目的第一行文字的基线对齐(效果如下,紫色是盒子)
      在这里插入图片描述
  7. flex-basis
    作用:指定子元素未受flex-grow或flex-shrink影响时的初始大小
    取值:<length>或<percent>,初始值是auto(此时会检查元素是否设置了width属性。如果有,则使用 width 的值作为 flex-basis 的值;如果没有,则用元素内容自身的大小。如果 flex-basis 的值不是 auto,width 属性会被忽略)

  8. flex-grow
    作用:每个弹性子元素的 flex-basis 值计算出来后,它们(加上子元素之间的外边距)加起来会占据一定的宽度。加起来的宽度不一定正好填满弹性容器的宽度,可能会有留白。多出来的留白(或剩余宽度)会按照 flex-grow(增长因子)的值分配给每个弹性子元素。
    取值:非负,初始值是0(此时元素的宽度不会超过flex-basis的宽度,不参与分配)
    示例:flex-grow 的值越大,元素的“权重”越高,也就会占据更大的剩余宽度。一个 flex-grow: 2 的子元素增长的宽度为 flex-grow: 1 的子元素的两倍,如下图:
    在这里插入图片描述

  9. flex-shrink
    作用: flex-shrink 属性与 flex-grow 遵循相似的原则。计算出弹性子元素的初始主尺寸后,它们的累加值可能会超出弹性容器的可用宽度。如果不用 flex-shrink,就会导致溢出,每个子元素的 flex-shrink 值代表了它是否应该收缩以及相应的收缩比例以防止溢出。(在开启了flex-wrap之后会忽略此属性)
    取值:非负,初始值为1(为 0 时,不会缩小)

    效果

    • 如果元素A的flex-shrink为0,而其他的元素都为0,那么A不会缩小
    • 如果元素A的flex-shrink为2,元素B的flex-shrink为1,那么A的缩小的部分的长度是B的缩小部分的长度的2倍
      在这里插入图片描述

    示例:如下图:
    在这里插入图片描述
    代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex-shrink缩放</title><style>* {padding: 0;margin: 0;box-sizing: border-box;}body {padding: 1em;}#content {display: flex;width: 500px;}#content div {flex-basis: 120px;border: 3px solid rgba(0, 0, 0, 0.2);}.box {flex-shrink: 2;}.box1 {flex-shrink: 1;}.result {margin-top: 20px;}p {line-height: 1.5em;}</style>
</head><body><p>容器宽度为 500px, 弹性子元素的flex-basic 是120px</p><p>A, B, C 设置 flex-shrink:2, D 和 E 设置 flex-shrink:1</p><p>根据js打印输出可知,A、B、C缩小的长度是D、E缩小长度的2倍</p><div id="content"><div class="box" id="A" style="background-color:red;">A</div><div class="box" style="background-color:lightblue;">B</div><div class="box" style="background-color:yellow;">C</div><div class="box1" id="D" style="background-color:brown;">D</div><div class="box1" style="background-color:lightgreen;">E</div></div><div class="result"></div><script>const A = document.getElementById("A");const A_width = getComputedStyle(A).width;const D = document.getElementById("D");const D_width = getComputedStyle(D).width;const content = document.getElementById("content");const content_width = getComputedStyle(content).width;const result = document.querySelector(".result");result.innerHTML = `A, B, C 缩放之后的长度是${A_width},<br />E缩放之后的长度是${D_width}, <br />容器宽度是${content_width}`</script></body></html>
  1. flex
    作用flex-growflex-shrinkflex-basis三个属性的简写
    取值

    • 单值语法:值必须是以下之一:
      • 一个 <flex-grow> 的有效值:此时简写会扩展为 flex: <flex-grow> 1 0
      • 一个<flex-basis>的有效值:此时简写会扩展为 flex: 1 1 <flex-basis>
      • 关键字 none 或者全局关键字(见后面)之一。
    • 双值语法
      • 第一个值必须是一个 flex-grow 的有效值。
      • 第二个值必须是以下之一:
        • 一个 flex-shrink的有效值:此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0
        • 一个 flex-basis 的有效值:此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>
    • 三值语法:值必须按照以下顺序指定:
      • 一个 flex-grow 的有效值。
      • 一个 flex-shrink 的有效值。
      • 一个 flex-basis 的有效值。

    全局关键字

    • initial
      元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。

    • auto
      元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”.

    • none
      元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。

    注意

    • flex属性与以往的简写属性不同,推荐使用简写形式,因为这样可以尽可能避免多次分开书写导致的布局不一致,并且可以提高对浏览器的兼容性。

    • <'flex-grow'>
      定义 flex 项目的 flex-grow 。负值无效。省略时默认值为 1。 (初始值为 0)

    • <'flex-shrink'>
      定义 flex 元素的 flex-shrink 。负值无效。省略时默认值为1。 (初始值为 1)

    • <'flex-basis'>
      定义 flex 元素的 flex-basis 属性。若值为0,则必须加上单位,以免被视作伸缩性。省略时默认值为 0。(初始值为 auto)

    简记采用逻辑推断的方法,初始值肯定会从安全性的角度考虑,所以,元素尽量不要随意放大,所以flex-grow属性初始为0;容器会尽量容纳下所有的元素,所以flex-shrink属性初始值为1;为了以元素自身为主导,flex-basis初始值为auto。而所谓的默认值,是在flex简写的写法中被省略时补充的值,以上规则能够体现出来。

  2. order
    作用:将弹性子元素从兄弟节点中移动到指定位置,覆盖源码顺序,值越小,位置越靠前
    取值:整数,初始值是0
    注意:慎重使用,因为视觉布局与源码顺序差别太大会影响网站的可访问性。在大多数浏览器里使用 Tab 键浏览元素的顺序与源码保持一致,如果视觉上差别太大就会令人困惑。视力受损的用户使用的大部分屏幕阅读器也是根据源码的顺序来的。

  3. align-self
    作用:跟弹性容器的 align-items 属性效果相同,但是它能单独给弹性子元素设定不同的对齐方式。
    取值与效果:auto 为初始值,会以容器的 align-items 值为准。其他值会覆盖容器的设置。align-self属性支持的关键字与 align-items 一样:flex-start、flex-end、center、stretch 以及 baseline。

结尾

感谢大家支持,如有错误,恳请指出,希望与大家共同进步!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/428446.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大模型训练实战经验总结

在当今AI技术飞速发展的背景下&#xff0c;定制化大模型的自主训练已成为满足特定行业需求、保障数据安全、提升模型应用效能的关键途径。本文将深度剖析这一过程的核心价值与实践智慧&#xff0c;从数据隐私保护、模型透明度增强&#xff0c;到数据预处理的精细操作&#xff0…

Packet Tracer - IPv4 ACL 的实施挑战(完美解析)

目标 在路由器上配置命名的标准ACL。 在路由器上配置命名的扩展ACL。 在路由器上配置扩展ACL来满足特定的 通信需求。 配置ACL来控制对网络设备终端线路的 访问。 在适当的路由器接口上&#xff0c;在适当的方向上 配置ACL。…

Python编码系列—Python外观模式:简化复杂系统的快捷方式

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

ZYNQ FPGA自学笔记~操作PLL

一 时钟缓冲器、管理和路由 垂直时钟中心&#xff08;clock backbone&#xff09;将设备分为相邻的左侧和右侧区域&#xff0c;水平中心线将设备分为顶部和底部两侧。clock backbone中的资源镜像到水平相邻区域的两侧&#xff0c;从而将某些时钟资源扩展到水平相邻区域。BUFG不…

windows下编译MicroRTS-Py

1.microRTS&#xff08;java&#xff09; microRTS是java写的跨平台的小型即时战略模拟器。 Farama-Foundation/MicroRTS: A simple and highly efficient RTS-game-inspired environment for reinforcement learning (github.com)https://github.com/Farama-Foundation/Micr…

Kubeadm快速安装 Kubernetes集群

1. Kubernetes简介 Kubernetes&#xff08;k8s&#xff09;是谷歌开源的容器编排平台&#xff0c;用于自动化部署、扩展和管理容器化应用程序。它具有以下特点&#xff1a; 开源容器化自动部署扩展高可用 2. Kubernetes架构 Kubernetes遵循主从式架构设计&#xff0c;主要分…

Python用TOPSIS熵权法重构粮食系统及期刊指标权重多属性决策MCDM研究|附数据代码...

原文链接&#xff1a;https://tecdat.cn/?p37724 在当今世界&#xff0c;粮食系统的稳定性至关重要。尽管现有的全球粮食系统在生产和分配方面表现出较高的效率&#xff0c;但仍存在大量人口遭受饥饿以及诸多粮食安全隐患。与此同时&#xff0c;在学术领域&#xff0c;准确评估…

OpenAI GPT o1技术报告阅读(3)-英文阅读及理解

✨继续阅读报告&#xff1a;使用大模型来学习推理(Reason) 原文链接&#xff1a;https://openai.com/index/learning-to-reason-with-llms/ 这次我们继续看一个英文阅读理解的案例。 原问题&#xff1a; The following passage is the draft of an excerpt from a contempora…

基于OpenCV的YOLOv5图片检测

利用OpenCV的DNN模块加载onnx模型文件进行图片检测。 1、使用的yolov5工程代码&#xff0c;调用export.py导出onnx模型。 2、下载opencv版本&#xff0c;https://opencv.org/releases/ 使用opencv版本4.5.3或以上&#xff0c;本文使用的opencv4.6.0 3、使用vc20…

css设置overflow:hiden行内元素会发生偏移的现象

父级元素包含几个行内元素 <div id"box"><p><span>按钮</span><span>测试文字文字文字测试文字文字文字</span><span>看这里</span></p></div>#box p{width: 800px;font-size: 30px;}#box p span{disp…

VMware启动时报错: “另一个程序已锁定文件的一部分,进程无法访问” 分析记录

项目场景&#xff1a; VMware启动时报错: “另一个程序已锁定文件的一部分,进程无法访问” 问题描述 VMware启动时报错: “另一个程序已锁定文件的一部分,进程无法访问” 原因分析&#xff1a; 虚拟机开启后会对部分文件继续加密&#xff0c;关闭时虚拟机会自动对其解密&…

css设置动态数组渲染及中间线平均分开显示

效果图&#xff1a; <template><div class"container"><div v-for"(item, index) in items" :key"index" class"item-container"><span class"item">{{ item }}</span><span v-if"in…

二级C语言2023-9易错题

1 二叉树结点数计算&#xff1a; 一棵二叉树有10个度为1的结点&#xff0c;7个度为2的结点&#xff0c;则该二叉树共有____个结点。 解&#xff1a; 2 指针&#xff1a; 有以下程序 #inctude<stdio.h> #include<stdlib.h> main() { int *a&#xff0c;*b&…

Unity数据持久化4——2进制

概述 基础知识 各类型数据转字节数据 文件操作相关 文件相关 文件流相关 文件夹相关 练习题 using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; using UnityEngine;public class Exercises1 : MonoBehaviour {/…

6. Python 输出长方形,直角三角形,等腰三角形

使用Python输出长方形&#xff0c;直角三角形&#xff0c;等腰三角形 这里主要使用python语言里的循环知识&#xff0c;具体说是Python语言里的循环嵌套&#xff0c; 注意&#xff0c;在实际使用中&#xff0c;循环嵌套一般最多到达3层&#xff0c;嵌套太多会影响到程序执行。…

详解ChatBI Agent架构:打造高效数据统计系统

随着人工智能技术的迅猛发展&#xff0c;智能对话系统在各行各业中的应用越来越广泛。本文将介绍一种名为ChatBI Agent的架构设计&#xff0c;并以电信运营商系统的经分数据统计Agent为案例&#xff0c;结合具体的代码实现&#xff0c;帮助读者了解这一系统的设计理念和实现方式…

新产品,推出 MLX90372GVS 第三代 Triaxis® 位置传感器 IC,适用于汽车和工业系统(MLX90372GVS-ACE-308)

Triaxis 旋转和线性位置传感器IC&#xff1a; MLX90372GVS-ACE-103 MLX90372GVS-ACE-108 MLX90372GVS-ACE-301 MLX90372GVS-ACE-200 MLX90372GVS-ACE-208 MLX90372GVS-ACE-303 MLX90372GVS-ACE-300 MLX90372GVS-ACE-350 MLX90372GVS-ACE-100 MLX90372GVS-ACE-101 MLX90372GVS-…

6.C_数据结构_查询_哈希表

概述 哈希表的查询是通过计算的方式获取数据的地址&#xff0c;而不是依次比较。在哈希表中&#xff0c;有一个键值key&#xff0c;通过一些函数转换为哈希表的索引值。 其中&#xff1a;这个函数被称为哈希函数、散列函数、杂凑函数&#xff0c;记为&#xff1a;H(key) 哈希…

使用 nvm 管理 node 版本:如何在 macOS 和 Windows 上安装使用nvm

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、nvm的安装与基本使用2.1 macOS安装nvm2.1.1 使用 curl 安装2.1.2 使用 Homebrew 安装 2.2 Windows安装nvm2.2.1 下载 nvm-windows2.2.2 安装 nvm-windows 2.3 安装node2.4 切换node版本 三、常见问题及解决方案…

STM32读写内部flash

一.简介 在 STM32 芯片内部有一个 FLASH 存储器&#xff0c;它主要用于存储代码&#xff0c;我们在电脑上编写好应用程序后&#xff0c;使用下载器把编译后的代码文件烧录到该内部 FLASH 中&#xff0c;由于 FLASH 存储器的内容在掉电后不会丢失&#xff0c;芯片重新上电复位后…