8. CSS弹性布局基础

第8章 弹性布局基础

CSS3引入了一个强大的布局模块——弹性布局(Flexbox),它提供了一种更加高效、直观的方式来排列和对齐元素,使复杂布局的实现变得更加简单。本章将详细介绍弹性布局的基本概念和属性,并通过具体示例帮助读者掌握如何使用弹性布局。

8.1 弹性布局简介

弹性布局(Flexbox)是一种一维布局模型,主要用于在一个方向上(水平或垂直)排列子元素。它能够让我们更轻松地创建各种复杂的布局,包括居中对齐、等宽列和灵活的项目排列。

特点
  • 简化对齐和分布:无论容器内的元素有多少,弹性布局都能让它们均匀分布或对齐。
  • 响应式设计:弹性布局能够根据容器的尺寸自动调整子元素的尺寸和排列方式,适合创建响应式设计。
  • 灵活的项目尺寸:子元素可以按比例缩放或扩展,以填满容器的剩余空间。
8.2 弹性容器与弹性项目

弹性布局的核心概念是弹性容器(flex container)和弹性项目(flex item)。

  • 弹性容器:设置了 display: flex;display: inline-flex; 的元素。
  • 弹性项目:弹性容器内的直接子元素。
示例
<div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div>
</div>
.flex-container {display: flex; /* 将容器设为弹性容器 */
}.flex-item {padding: 10px;background-color: #f0f0f0;margin: 5px;border: 1px solid #ccc;
}
8.3 弹性布局的基本属性
弹性容器的属性
  1. flex-direction:定义主轴的方向(弹性项目的排列方向)。

    • 取值:row(默认值),row-reversecolumncolumn-reverse

    • 示例:

      .flex-container {flex-direction: row; /* 水平排列,默认值 */
      }
      
  2. flex-wrap:定义弹性项目是否换行。

    • 取值:nowrap(默认值),wrapwrap-reverse

    • 示例:

      .flex-container {flex-wrap: wrap; /* 允许弹性项目换行 */
      }
      
  3. justify-content:定义主轴上的对齐方式。

    • 取值:flex-start(默认值),flex-endcenterspace-betweenspace-aroundspace-evenly

    • 示例:

      .flex-container {justify-content: space-between; /* 项目在主轴上均匀分布 */
      }
      
  4. align-items:定义交叉轴上的对齐方式。

    • 取值:stretch(默认值),flex-startflex-endcenterbaseline

    • 示例:

      .flex-container {align-items: center; /* 项目在交叉轴上居中对齐 */
      }
      
  5. align-content:定义多根轴线的对齐方式。如果只有一根轴线,该属性不起作用。

    • 取值:stretch(默认值),flex-startflex-endcenterspace-betweenspace-around

    • 示例:

      .flex-container {align-content: space-around; /* 多根轴线均匀分布 */
      }
      
弹性项目的属性
  1. order:定义项目的排列顺序,数值越小,排列越靠前。

    • 示例:

      .flex-item {order: 1; /* 默认值为0 */
      }
      
  2. flex-grow:定义项目的放大比例。

    • 示例:

      .flex-item {flex-grow: 1; /* 项目将填满剩余空间 */
      }
      
  3. flex-shrink:定义项目的缩小比例。

    • 示例:

      .flex-item {flex-shrink: 1; /* 项目可以缩小以适应容器 */
      }
      
  4. flex-basis:定义在分配多余空间之前,项目的默认大小。

    • 示例:

      .flex-item {flex-basis: 100px; /* 项目的初始大小 */
      }
      
  5. align-self:允许单个项目在交叉轴上对齐方式与其他项目不同。

    • 取值:auto(默认值),flex-startflex-endcenterbaselinestretch

    • 示例:

      .flex-item {align-self: flex-end; /* 项目在交叉轴上对齐到底部 */
      }
      
8.4 简单弹性布局示例

以下示例展示了如何使用弹性布局属性创建一个简单的响应式布局。

示例1:水平排列项目
<div class="flex-container"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div>
</div>
.flex-container {display: flex; /* 将容器设为弹性容器 */flex-direction: row; /* 项目水平排列 */justify-content: space-around; /* 项目在主轴上均匀分布 */align-items: center; /* 项目在交叉轴上居中对齐 */height: 200px; /* 容器高度 */border: 1px solid #ccc; /* 容器边框 */
}.flex-item {padding: 20px;background-color: #f0f0f0;border: 1px solid #ccc;margin: 5px;flex-grow: 1; /* 项目将填满剩余空间 */
}
示例2:垂直排列项目
<div class="flex-container-vertical"><div class="flex-item">Item 1</div><div class="flex-item">Item 2</div><div class="flex-item">Item 3</div>
</div>
.flex-container-vertical {display: flex; /* 将容器设为弹性容器 */flex-direction: column; /* 项目垂直排列 */justify-content: center; /* 项目在主轴上居中对齐 */align-items: flex-start; /* 项目在交叉轴上靠左对齐 */height: 300px; /* 容器高度 */border: 1px solid #ccc; /* 容器边框 */
}.flex-item {padding: 20px;background-color: #f0f0f0;border: 1px solid #ccc;margin: 5px;flex-grow: 1; /* 项目将填满剩余空间 */
}

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

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

相关文章

哪里能下载到合适的衣柜3D模型素材?

室内设计师在进行家居设计时&#xff0c;衣柜3D模型素材是非常重要的工具。那么&#xff0c;哪里能下载到合适的衣柜3D模型素材呢? 一、建e网&#xff1a; ①建e网是一个专注于3D模型素材分享的平台&#xff0c;上面可以找到大量的衣柜3D模型。 ②该网站提供的模型种类丰富&am…

闭包是什么?有什么特性?对页面有什么影响?

闭包是指在一个函数内部定义的函数&#xff0c;并且该函数可以访问到外部函数的变量。闭包可以将外部函数的变量保持在内存中&#xff0c;并且不会被释放。 闭包具有以下特性&#xff1a; 1. 函数内部定义的函数可以访问外部函数的变量。 2. 外部函数的变量可以保持在内存中&a…

Remix IDE 创建和部署第一个合约HelloWorld

Remix IDE 地址 https://remix.ethereum.org/ 流程步骤&#xff1a; 创建一个新文件 输入文件名保存 在文件资源管理器中&#xff0c;点击新建文件图标创建一个新文件&#xff0c;并给它命名。在 Remix 中&#xff0c;默认的文件扩展名是 .sol &#xff0c;如果文件名没有…

外企如何有效面对日益严格的跨境数据传输法律?

在当今这个数据驱动的时代&#xff0c;随着全球化步伐的加快&#xff0c;企业跨国界的数据交流已成为常态。但随之而来的&#xff0c;是各国政府对跨境数据传输日益严格的规定和监管&#xff0c;这让众多外资企业&#xff08;简称“外企”&#xff09;在享受全球市场红利的同时…

Spring Cache自定义缓存key和过期时间

一、自定义全局缓存key和双冒号替换 使用 Redis的客户端 Spring Cache时&#xff0c;会发现生成 key中会多出一个冒号&#xff0c;而且有一个空节点的存在。 查看源码可知&#xff0c;这是因为 Spring Cache默认生成key的策略就是通过两个冒号来拼接。 同时 Spring Cache缓存…

Kong网关的负载均衡

安装java环境 查询 java安装包 196 yum list java* 安装java8197 yum install -y java-1.8.0-openjdk.x86_64 检验java8是否安装成功。198 java -version2个tomcat准备 另外一个tomcat区别在于&#xff1a;配置文件。conf/server.xml 启动tomcat [rootlocalhost bin]# ./…

C++之单链表与双链表逆序实例(二百七十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

拥塞控制的微观行为与力学解释

本文以 tcptrace 图为基&#xff0c;描述传输的微观行为&#xff0c;并给出一个初中几何描述的压水井模型。 统计复用网络的拥塞控制&#xff0c;宏观看 inflight&#xff0c;微观看 pacing rate&#xff0c;宏观大方向不对&#xff0c;微观再正确也不行。 而网络的统计动力学…

AI 驱动的低代码平台-网易CodeWave 低代码平台 AI 智能化实践

一、实践背景&#xff1a; 随着低代码赛道的蓬勃发展&#xff0c;越来越多的低代码产品如雨后般春笋涌出开始进入市场&#xff0c;面对市场的考验&#xff0c;低代码平台也在面临两大问题&#xff1a; 定制开发的使用门槛太高&#xff0c;效率太低。低代码产品进入到企业当中…

错误信息:Traceback (most recent call last):

错误信息 Traceback (most recent call last): File "E:\python.learning\pythonDateExcavateTreat\数据挖掘课程设计\2_京东用户意向购买数据探索.py", line 74, in <module> df_ui df_ui.to_frame().reset_index() File "E:\python.learning\lib\site-…

决策树模型-预测用户是否购买某母婴产品

1&#xff0c;场景描述 假设我们是京东的数据分析师&#xff0c;负责分析母婴产品的购买行为。我们想预测用户是否会购买一款新上线的母婴产品。为了进行预测&#xff0c;我们将利用用户的历史购买数据、浏览行为和其他特征&#xff0c;通过决策树模型进行分析&#xff0c;并提…

猫狗分类识别模型建立②模型建立

一、导入依赖库 pip install opencv-python pip install numpy pip install tensorflow pip install keras 二、模型建立 pip install opencv-python pip install numpy pip install tensorflow pip install kerasimport os import xml.etree.ElementTree as ETimpor…

NSSCTF-Web题目4

[SWPUCTF 2021 新生赛]hardrce 1、题目 2、知识点 rce&#xff1a;远程代码执行、url取反编码 3、解题思路 打开题目 出现一段代码&#xff0c;审计源代码 题目需要我们通过get方式输入变量wllm的值 但是变量的值被过滤了&#xff0c;不能输入字母和\t、\n等值 所以我们需…

【教学类-59-】专注力视觉训练01(圆点百数图)

背景需求&#xff1a; 视觉训练的神奇效果&#xff0c;让你的宝贝成为焦点 - 小红书魔法视觉追踪-视觉训练—— &#x1f50d;视觉训练&#x1f50d; &#x1f539;想要提高宝宝的专注力&#xff0c;视觉训练是个绝佳方法&#xff01; &#x1f539;让宝宝仔细观察数字的路线&a…

Java中的super关键字详解

在Java编程中&#xff0c;super关键字是一个非常重要的概念&#xff0c;尤其是在继承和多态的场景中。理解super关键字的使用方法和其背后的机制&#xff0c;对于掌握面向对象编程&#xff08;OOP&#xff09;的基本概念至关重要。本篇博客将详细讲解super关键字的各种用法及其…

代码随想录算法训练营第22天(py)| 二叉树 | 669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 力扣链接 给定一个二叉搜索树&#xff0c;同时给定最小边界L 和最大边界 R。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[L, R]中 (R>L) 思路 如果当前节点元素小于low&#xff0c;递归右子树&#xff0c;返回符合条件的头节点 如果当前节点元…

网络请求客户端WebClient的使用

在 Spring 5 之前&#xff0c;如果我们想要调用其他系统提供的 HTTP 服务&#xff0c;通常可以使用 Spring 提供的 RestTemplate 来访问&#xff0c;不过由于 RestTemplate 是 Spring 3 中引入的同步阻塞式 HTTP 客户端&#xff0c;因此存在一定性能瓶颈。根据 Spring 官方文档…

OrangePi AIpro 快速上手初体验——接口、样例和目标检测

​ 一、 开发板简介 OrangePi AIpro开发板是香橙派联合华为精心打造的高性能 AI 开发板&#xff0c;其搭载了昇腾 AI 处理器&#xff0c;可提供 8TOPS INT8 的计算能力&#xff0c;内存提供了 8GB 和 16GB两种版本。可以实现图像、视频等多种数据分析与推理计算&#xff0c;可…

【已解决】使用token登录机制,token获取不到,blog_list.html界面加载不出来

Bug产生 今天使用token完成用户登录信息的存储的时候被卡了大半天。 因为登录的功能写的已经很多了&#xff0c;所以今天就没有写一点验一点&#xff0c;而是在写完获取博客列表功功能&#xff0c;验证完它的后端后&#xff0c;了解完令牌的基本使用以及Jwt的基本使用方式——…

4.共享文件夹的设置

注&#xff1a;设置共享文件夹&#xff1a;首先要先关机 一、点击 编辑虚拟机设置 二、点击 选项 选项卡 三、点击 共享文件夹 四、在本地建立一个共享文件夹后选择路径 五、Linux系统文件夹中的共享文件夹路径 六、在Linux系统中查看共享文件夹 Ubuntushare是共享文件夹&…