CSS弹性布局:灵活布局的终极指南

在网页设计中,CSS 弹性布局(Flexbox)是一个不可或缺的工具。它能帮助你轻松地排列和对齐元素,尤其是在响应式设计中表现出色。今天,我们就来深入探讨一下 Flexbox 的各个属性,让你彻底掌握这个强大的布局工具。

一、什么是 Flexbox?

CSS 弹性布局(Flexbox)是一个强大的布局模型,旨在提供更有效的方式来布局、对齐和分配空间,尤其是在动态和复杂的网页设计中。Flexbox 能够处理一维布局,无论是横向还是纵向。

二、核心概念

在 Flex 布局中,设置了display: flex;的元素称为Flex 容器,而它的所有子元素称为Flex 项目。容器默认会产生两条轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的起始位置称为main start,结束位置称为main end;交叉轴的起始位置称为cross start,结束位置称为cross end

项目会沿着主轴排列,每个项目占据的主轴空间称为main size,占据的交叉轴空间称为cross size

  • 弹性容器(Flex Container):通过设置 display 属性为 flex 或 inline-flex,将元素变为弹性容器。
  • 弹性子项(Flex Item):弹性容器内的直接子元素称为弹性子项。
  • 主轴(Main Axis):弹性容器的主轴方向,默认为水平方向。
  • 叉轴(Cross Axis):垂直于主轴的轴称为交叉轴。

三、容器的属性

Flex 容器可以使用以下六个属性进行配置:

属性说明
flex-direction定义主轴方向
justify-content主轴上的对齐方式
align-items交叉轴上的对齐方式
flex-wrap项目是否换行
flex-flow简写形式
align-content多根轴线的对齐方式

1、flex-direction

  • 作用:定义主轴方向,即弹性项目的排列方向。
  • 可选值
    • row(默认):从左到右。
    • row-reverse:从右到左。
    • column:从上到下。
    • column-reverse:从下到上。
.container {
    flex-direction: column; /* 让项目垂直排列 */
}

2、justify-content

  • 作用:定义弹性项目在主轴上的对齐方式。
  • 可选值
    • flex-start:默认,项目从起始位置开始排列。
    • flex-end:项目从结束位置排列。
    • center:项目居中对齐。
    • space-between:项目之间均匀分布,第一个和最后一个项目紧贴边缘。
    • space-around:项目之间均匀分布,项目两侧留有相同的边距。
.container {
    justify-content: space-around; /* 项目均匀分布,两侧留有边距 */
}

3、align-items

  • 作用:定义弹性项目在交叉轴上的对齐方式。
  • 可选值
    • stretch(默认):项目被拉伸以填满容器。
    • flex-start:项目在交叉轴的起始位置对齐。
    • flex-end:项目在交叉轴的结束位置对齐。
    • center:项目在交叉轴居中对齐。
    • baseline:项目的基线对齐。
.container {
    align-items: flex-end; /* 项目在交叉轴的结束位置对齐 */
}

4、flex-wrap

  • 作用:控制弹性项目是否换行。
  • 可选值
    • nowrap(默认):不换行,所有项目在一行内。
    • wrap:项目换行,第一行从上到下。
    • wrap-reverse:项目换行,第一行从下到上。
.container {
    flex-wrap: wrap; /* 允许项目换行 */
}

5、flex-flow

  • 作用flex-flowflex-directionflex-wrap的简写形式,默认值为row nowrap
.container {
  flex-flow: row nowrap;
}

6、align-content

  • 作用:定义了多根轴线的对齐方式,若项目只有一根轴线,该属性无效。
  • 可选值
    • stretch(默认):项目被拉伸以填满容器。
    • flex-start:项目在交叉轴的起始位置对齐。
    • flex-end:项目在交叉轴的结束位置对齐。
    • center:项目在交叉轴居中对齐。
    • space-between:项目之间均匀分布,第一个和最后一个项目紧贴边缘。
    • space-around:项目之间均匀分布,项目两侧留有相同的边距。
.container {
  align-content: flex-start;
}

四、项目的属性

Flex 项目可以使用以下六个属性进行配置:

属性说明
order项目的排列顺序
flex-grow放大比例
flex-shrink缩小比例
flex-basis主轴上的初始大小
flex简写形式
align-self对齐方式

1、order

  • 作用order属性定义了项目的排列顺序,值越小,排列越靠前,默认值为 0。
.item {
  order: 1;
}

2、flex-grow

作用:定义项目的放大比例。默认值为 0,表示项目不会放大。

.item {
    flex-grow: 2; /* 此项目会占据更多的空间 */
}

如果一个项目的flex-grow值为 1,其他项目的值为 0,那么该项目会占据剩余空间。

3、flex-shrink

作用:定义项目的缩小比例。默认值为 1,表示项目会缩小以适应容器。

.item {
    flex-shrink: 1; /* 默认值,可以不写 */
}

如果容器宽度变小,具有较高flex-shrink值的项目会更早地缩小。

4、flex-basis

作用:定义项目在主轴上的初始大小。默认值为auto,表示项目会根据其内容大小。

.item {
    flex-basis: 150px; /* 初始宽度为150px */
}

可以指定具体的宽度或高度。

5、flex

作用flexflex-grow, flex-shrink, flex-basis的简写。常用的形式是flex: [flex-grow] [flex-shrink] [flex-basis];

.item {
    flex: 1 1 200px; /* 先放大、再缩小,初始宽度200px */
}

使用一个简写形式来设置多个属性。

6、align-self

作用:允许单个弹性项目有自己的对齐方式,可以覆盖align-items设置。

.item {
    align-self: center; /* 这个项目在交叉轴居中对齐 */
}

使某个项目在交叉轴上单独对齐。

五、实例应用

利用 Flexbox 布局一个简单的导航栏。

<div class="navbar">
    <div class="logo">Logo</div>
    <div class="nav-items">
        <div class="nav-item">首页</div>
        <div class="nav-item">关于我们</div>
        <div class="nav-item">服务</div>
        <div class="nav-item">联系</div>
    </div>
</div>
.navbar {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中对齐 */
    background-color: #333;
    padding: 10px;
    color: white;
}

.logo {
    flex: 0 1 100px; /* Logo不放大,初始宽度100px */
}

.nav-items {
    display: flex; /* 设置子项为弹性布局 */
}

.nav-item {
    flex: 1; /* 每个导航项平分剩余空间 */
    padding: 10px;
    text-align: center;
}

结语

CSS 弹性布局提供了极大的灵活性和控制力,特别是在创建响应式设计时。通过掌握这些属性,你可以轻松实现复杂的布局,使你的网页在各种设备上都保持完美的外观。现在就开始试试吧,体验弹性布局带来的无限可能!

原文地址

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

论文阅读:Computational Long Exposure Mobile Photography (一)

这篇文章是谷歌发表在 2023 ACM transaction on Graphic 上的一篇文章&#xff0c;介绍如何在手机摄影中实现长曝光的一些拍摄效果。 Abstract 长曝光摄影能拍出令人惊叹的影像&#xff0c;用运动模糊来呈现场景中的移动元素。它通常有两种模式&#xff0c;分别产生前景模糊或…

CTF入门教程(非常详细)从零基础入门到竞赛,看这一篇就够了!

目录 一、CTF简介 二、CTF竞赛模式 三、CTF各大题型简介 四、CTF学习路线 4.1、初期 1、htmlcssjs&#xff08;2-3天&#xff09; 2、apachephp &#xff08;4-5天&#xff09; 3、mysql &#xff08;2-3天&#xff09; 4、python (2-3天) 5、burpsuite &#xff08;…

linux 进程调度学习笔记

https://zhuanlan.zhihu.com/p/1248579228 吐血整理 | 肝翻 Linux 进程调度所有知识点 执行调度 Kernel 判断当前进程标记是否为 TIF_NEED_RESCHED&#xff0c;是的话调用 schedule 函数&#xff0c;执行调度&#xff0c;切换上下文&#xff0c;这也是上面抢占(preempt)机制的…

django图书管理系统-计算机毕业设计源码00648

摘要 图书管理系统在数字化阅读趋势、图书馆自动化管理、用户体验需求和信息技术应用等方面具有重要的研究意义。图书馆自动化管理系统的引入和应用提高了图书借阅过程的效率和准确性&#xff0c;减少了对手工操作和纸质记录的需求。用户对系统的易用性、查询速度、借还流程有更…

SQL实战训练之,力扣:2020. 无流量的帐户数(递归)

目录 一、力扣原题链接 二、题目描述 三、建表语句 四、题目分析 五、SQL解答 六、最终答案 七、验证 八、知识点 一、力扣原题链接 2020. 无流量的帐户数 二、题目描述 表: Subscriptions ------------------- | Column Name | Type | ------------------- | accoun…

ARM base instruction -- ccmp (immediate)

Conditional Compare (immediate) sets the value of the condition flags to the result of the comparison of a register value and an immediate value if the condition is TRUE, and an immediate value otherwise. 此指令一般出现在 cmp 指令之后&#xff0c;表示双重比…

【支付行业-支付系统架构及总结】

记得第一次看埃隆马斯克&#xff08;Elon Musk&#xff09;讲第一性原理的视频时&#xff0c;深受震撼&#xff0c;原来还可以这样处理复杂的事务。这篇文章也尝试化繁为简&#xff0c;探寻支付系统的本质&#xff0c;讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付…

【系统面试篇】进程和线程类(1)(笔记)——区别、通讯方式、同步、互斥、锁分类

目录 一、问题综述 1. 进程和线程的区别&#xff1f; 2. 进程的状态有哪些&#xff1f; 3. 进程之间的通信方式? &#xff08;1&#xff09;管道 &#xff08;2&#xff09;消息队列 &#xff08;3&#xff09;共享内存 &#xff08;4&#xff09;信号量 &#xff08…

Java算法OJ(6)归并分治

目录 1.前言 2.正文 2.1归并分治的概念 2.2计算数组的小和 2.2.1题目 2.2.2示例 2.2.3代码 2.3翻转对 2.3.1题目 2.3.2示例 2.3.3代码 3.小结 1.前言 哈喽大家好吖&#xff0c;今天继续来给大家带来Java算法——归并分治的讲解&#xff0c;学习这篇的前提可以先把…

【网络】自定义协议——序列化和反序列化

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是序列化和分序列&#xff0c;并且自己能手撕网络版的计算器。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不…

Abaqus随机骨料过渡区孔隙三维网格插件:Random Agg ITZ Pore 3D (Mesh)

插件介绍 Random Agg ITZ Pore 3D (Mesh) V1.0 - AbyssFish 插件可在Abaqus内参数化建立包含水泥浆基体、粗细骨料、界面过渡区&#xff08;ITZ&#xff09;、孔隙在内的多相材料混凝土细观背景网格模型。 模型说明 插件采用材料映射单元的方式&#xff0c;将不同相材料赋值…

【含开题报告+文档+源码】基于SpringBoot+Vue智能居民健康检测系统设计与实现

开题报告 随着社会发展和人民生活水平的提高&#xff0c;人们对健康生活的要求越来越高。而广大居民由于条件限制&#xff0c;存在着健康管理服务不足的问题。本文基于JavaWeb技术&#xff0c;设计并实现了一种居民健康检测系统。首先&#xff0c;本文对该平台的需求进行了分析…

基于Multisim8路抢答器电路仿真电路(含仿真和报告)

【全套资料.zip】8路抢答器电路仿真电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.设计数字式抢答器&#xff0c;每组选手具有一个抢答按钮。 2.电路具有第一抢答信号的鉴别和锁存…

Java 网络编程(一)—— UDP数据报套接字编程

概念 在网络编程中主要的对象有两个&#xff1a;客户端和服务器。客户端是提供请求的&#xff0c;归用户使用&#xff0c;发送的请求会被服务器接收&#xff0c;服务器根据请求做出响应&#xff0c;然后再将响应的数据包返回给客户端。 作为程序员&#xff0c;我们主要关心应…

人工智能学习--归一化(Normalization)

概念 归一化是数据预处理中将不同量纲的特征数据缩放至同一尺度的过程&#xff0c;使特征值落在同一范围&#xff08;如[0, 1]或[-1, 1]&#xff09;。归一化有助于消除量纲影响&#xff0c;提升算法的收敛速度和模型稳定性&#xff0c;尤其在梯度下降和距离计算等算法中尤为重…

高校实验室安全巡检系统设计与实现(源码+定制+开发)高校实验室巡检系统、实验室安全管理平台、实验室安全监控系统、智能实验室巡查系统、高校实验室风险管理

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…

解决程序因缺少xinput1_3.dll无法运行的有效方法,有效修复丢失xinput1_3.dll

如果你的电脑在运行某些应用程序或游戏时提示“xinput1_3.dll丢失”或“找不到xinput1_3.dll”的错误消息&#xff0c;那么很可能是因为你的系统中缺少这个重要的DLL文件而导致的问题。那么电脑出现xinput1_3.dll丢失的问题时有哪些方法进行修复呢&#xff1f; 如何确定电脑是否…

论文笔记(五十四)pi0: A Vision-Language-Action Flow Model for General Robot Control

π0: A Vision-Language-Action Flow Model for General Robot Control 文章概括摘要I. INTRODUCTIONII. RELATED WORKIII. OVERVIEWIV. π 0 \pi_0 π0​模型V. 数据收集和培训配方A. 预训练和后训练B. 语言和高级策略C. 机器人系统细节 VI. 实验评估A. 基础模型评估B. 遵循语…

Redis 基础数据改造

优质博文&#xff1a;IT-BLOG-CN 一、服务背景 基础数据查询服务&#xff1a;提供航司&#xff08;5000家&#xff09;、机场&#xff08;4000&#xff09;、票台&#xff08;40000&#xff09;、城市&#xff08;4000&#xff09;等基础数据信息。 痛点一&#xff1a;因为基…

C# String系列(3):StringBuilder有诸多优势,它能代替String吗?

前言 嗨&#xff0c;大家好&#xff01; 之前我们在文章《C# String 类型&#xff1a;那些你可能不知道的秘密》分享了 C# String 类型的一些小秘密和小技巧&#xff0c;其中提到一个性能提升的小贴士&#xff1a;在拼接字符串时&#xff0c;使用 StringBuilder 替代 String。…