CSS学习笔记（二十二）弹性布局

最新推荐文章于 2024-01-11 18:10:36 发布
最新推荐文章于 2024-01-11 18:10:36 发布
阅读量274 收藏 2
点赞数
分类专栏： 前端学习 文章标签： css html flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43625134/article/details/117224268
版权

CSS Flexbox

CSS Flexbox 布局模块

在 Flexbox 布局模块（问世）之前，可用的布局模式有以下四种：

  • 块（Block），用于网页中的部分（节）
  • 行内（Inline），用于文本
  • 表，用于二维表数据
  • 定位，用于元素的明确位置

弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。

Flexbox 元素

如需开始使用 Flexbox 模型，您需要首先定义 Flex 容器。
在这里插入图片描述
上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。

实例
含有三个 flex 项目的 flex 容器：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

<p>弹性布局中必须有一个 <em>display</em> 属性设置为 <em>flex</em> 的父元素。</p>

<p>弹性容器的直接子元素会自动成为弹性项目。</p>

</body>
</html>

父元素（容器）

通过将 display 属性设置为 flex，flex 容器将可伸缩：
实例

.flex-container {
  display: flex;
}

以下是 flex 容器属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction 属性

flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
实例
column 值设置垂直堆叠 flex 项目（从上到下）：

.flex-container {
  display: flex;
  flex-direction: column;
}

实例
column-reverse 值垂直堆叠 flex 项目（但从下到上）：

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

实例
row 值水平堆叠 flex 项目（从左到右）：

.flex-container {
  display: flex;
  flex-direction: row;
}

实例
row-reverse 值水平堆叠 flex 项目（但从右到左）：

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

flex-wrap 属性

flex-wrap 属性规定是否应该对 flex 项目换行。

下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。
实例
wrap 值规定 flex 项目将在必要时进行换行：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>flex-wrap 属性</h1>

<p>"flex-wrap: wrap;" 规定 flex 项目将在必要时进行换行：</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

实例
nowrap 值规定将不对 flex 项目换行（默认）：

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

实例
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}

在这里插入图片描述

flex-flow 属性

flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

实例

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

justify-content 属性

justify-content 属性用于对齐 flex 项目：
在这里插入图片描述
实例
center 值将 flex 项目在容器的中心对齐：

.flex-container {
  display: flex;
  justify-content: center;
}

实例
flex-start 值将 flex 项目在容器的开头对齐（默认）：

.flex-container {
  display: flex;
  justify-content: flex-start;
}

实例
flex-end 值将 flex 项目在容器的末端对齐：

.flex-container {
  display: flex;
  justify-content: flex-end;
}

实例
space-around 值显示行之前、之间和之后带有空格的 flex 项目：
在这里插入图片描述

.flex-container {
  display: flex;
  justify-content: space-around;
}

实例
space-between 值显示行之间有空格的 flex 项目：
在这里插入图片描述

.flex-container {
  display: flex;
  justify-content: space-between;
}

align-items 属性

align-items 属性用于垂直对齐 flex 项目。

实例
center 值将 flex 项目在容器中间对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

实例
flex-start 值将 flex 项目在容器顶部对齐：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

实例
flex-end 值将弹性项目在容器底部对齐：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

实例
stretch 值拉伸 flex 项目以填充容器（默认）：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

实例
baseline 值使 flex 项目基线对齐：

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

align-content 属性

align-content 属性用于对齐弹性线。
实例
space-between 值显示的弹性线之间有相等的间距：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-between;
}

实例
space-around 值显示弹性线在其之前、之间和之后带有空格：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: space-around;
}

实例
stretch 值拉伸弹性线以占据剩余空间（默认）：
在这里插入图片描述

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: stretch;
}

实例
center 值在容器中间显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

实例
flex-start 值在容器开头显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}

实例
flex-end 值在容器的末尾显示弹性线：

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}

完美的居中

解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：

实例

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

实例

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

用于弹性项目的属性有：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order 属性

order 属性规定 flex 项目的顺序。
在这里插入图片描述
代码中的首个 flex 项目不必在布局中显示为第一项。
order 值必须是数字，默认值是 0。

实例
order 属性可以改变 flex 项目的顺序：

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
在这里插入图片描述
该值必须是数字，默认值是 0。

实例
使第三个弹性项目的增长速度比其他弹性项目快八倍：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
在这里插入图片描述
该值必须是数字，默认值是 0。

实例
不要让第三个弹性项目收缩得与其他弹性项目一样多：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。
在这里插入图片描述
实例
将第三个弹性项目的初始长度设置为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

实例
使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。
在这里插入图片描述
在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

实例
把第三个弹性项目对齐到容器的中间：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

实例
将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：
在这里插入图片描述

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

CSS Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性：
在这里插入图片描述

〔晴【天】º〕
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端CSS【弹性布局】常用【特效及动画】
m0_53401967的博客
09-23 372
less](C:\Users\Administrator\Desktop\web课程\视频课\less\02-08-Less\03-讲义\less.png)- animation-play-state：动画状态 paused（暂停） running（运动）- animation-iteration-count：定义循环次数 infinite：无限循环。- animation-fill-mode：forwards：保留最后一帧动画。- animation-duration：动画持续时间。
Flex弹性布局在项目中的运用
得意小门生的博客
08-14 365
一、Flex布局实现头尾固定、中间内容自适应 头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局。 代码HTML： <div class="wrap"> <div class="header">头部</div> <div class="content">中
弹性布局常用属性
nic's blog
06-04 7323
弹性布局常用属性
css弹性布局和网格布局
CDSN_Dark的博客
10-02 1596
css布局 一、知识补充 1. 浮动的特性 只会影响后面的元素 文本不会被浮动元素覆盖（浮动的特性就是图文混合） 具备内联盒子特性：宽度由内容决定 具备块级盒子特性：支持所有样式 浮动放不下，会自动折行 template: <div class="class"> <div></div> <div></div> <div>图文混合</div> </div>
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
热门推荐
BADAO_LIUMANG_QIZHI的博客
03-23 3万+
场景 Flex是Flexible Box的缩写，意为”弹性布局”。 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。 实现如下类似布局 最外层是是一个div,div里面是上面一个照片，下面一个表单，这两个元素居中排列。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、外层div设置样式 .login { display: flex; f...
CSS布局学习笔记
sarsuki的博客
01-11 686
在讨论布局时，对我们来说最重要的两个值是 display:flex 和 display:grid。在CSS中实现页面布局的主要方法是设定 display 属性的值。
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS学习笔记～～～～
05-17
在`CSS学习笔记-01.md`、`CSS学习笔记-02.md`和`CSS学习笔记-03.md`中，可能会深入讲解这些概念，包括更多选择器用法、布局技巧、CSS3特效和预处理器的使用，帮助读者逐步掌握这个强大的样式语言。
css网页布局学习笔记
01-15
本学习笔记将深入探讨CSS在网页布局中的应用，帮助读者掌握如何利用CSS创建美观且响应式的网页。 一、CSS基础 在了解网页布局之前，我们需要熟悉CSS的基本语法和选择器。CSS通过选择器来指定要应用样式的HTML元素，...
html_css学习笔记_第一阶段.rar
02-22
HTML和CSS是构建网页设计与布局的两大核心技术。HTML（HyperText Markup...通过阅读“html_css学习笔记_第一阶段.rar”中的文档，你可以逐步掌握这些基本技能，并通过实践加深理解，从而在网页设计领域打下坚实的基础。
html+css入门学习笔记
最新发布
01-24
本入门学习笔记将帮助初学者理解这两门技术的基本概念，逐步掌握创建动态、美观网页的方法。 HTML是用于创建网页内容的语言，它通过一系列标签来定义网页的各个部分，如标题、段落、图片、链接等。在HTML5中，新增...
flex布局，换行的元素上下设置间距
qq_37635012的博客
12-12 4347
2） 设置需要更改间距的元素（li）的margin-bottom：14px;然后使用结构伪类选择器设置最后的几个元素margin-bottom: 0;1）设置需要更改间距的元素（li）的margin-bottom:14px,然后用父容器（ul）的margin-bottom: -14px;当我们使用弹性盒子布局后，默认元素是没有外边距的，紧挨着样式就有点丑，如果想使换行后，元素的外边距有个距离，可以用如下方法解决。
CSS弹性布局&网格布局
qq_64450294的博客
04-29 1635
一、Flexbox 弹性框布局模块，可更轻松设计灵活的响应式布局，而无需使用浮动或定位。 首先应给容器设置display 属性 <div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div> .flex-container { display: flex; } 其次，flex容器属性有： flex
弹性布局
GXY1551705593的博客
07-26 285
弹性布局总结： 弹性布局即Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 1、作用于父容器的6大属性。 ① flex-direction属性决定主轴的方向（即项目的排列方向）。             row（默认值）： 主轴为水平方向，起点在左端；     ...
弹性布局（弹性盒子）
m0_65557920的博客
03-03 325
传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。 它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。 弹性布局display：flex只对次一级生效 flex布局默认有两根轴，分别是水平方向的主轴main、垂直方向的交叉轴 axis，这两个轴互相垂直，当主轴方向改变时，交叉轴也会跟着改变 父元素： （改变主轴方向）...
flex布局-理论与实践篇
boysky0015的博客
05-31 708
首先回顾一下，之前是怎么布局的，一般我们用float比较常见吧！有的情况还用定位，但是浮动坑很多，有时要清楚浮动。 今天介绍一种新的布局方法，即flex布局。在这里我们还记得主浏览的内核么，在下文中有点用处。 五大浏览器及内核 IE：Trident firefox：Gecko chrome：Blink opera：Presto safari： Webkit 1.flex布局是什么？
Flex布局相关知识点
MYNN13的博客
07-17 4847
flex布局
几种布局方式
weixin_30438813的博客
06-29 412
一、固定布局： 宽度，高度固定，页面被一个固定网页包裹，容器不能移动，页面的宽高不随页面的变化而变化，这种布局大家比较熟悉，这种方式一度成为页面布局的主流方式，这样布局设计简单，更容易定义，但是由于屏幕尺寸的不同，特别是移动端各个设备的不同，这种布局在灵活性方式可用度不高。 二、流式布局 以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，...
css进阶三（弹性盒子布局）
qq_44872688的博客
10-19 728
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值