设置flex中每一行的最后一个元素没有padding_什么是弹性（Flex）布局 ？15分钟弄懂Flex布局...

最新推荐文章于 2024-06-12 00:00:00 发布
最新推荐文章于 2024-06-12 00:00:00 发布
阅读量1.4k 收藏 2
点赞数 1
文章标签： 设置flex中每一行的最后一个元素没有padding

在网页布局的学习中，我们经常会遇到弹性（Flex）布局，那么弹性（Flex）布局究竟是什么样子的呢？相信你学完了本篇文章就会明白Flex（弹性）布局的真正的意思了。

web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）​zhuanlan.zhihu.com

什么是Flexbox ？

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

  • 1、在不同方向排列元素
  • 2、重新排列元素的显示顺序
  • 3、更改元素的对齐方式
  • 4、动态地将元素装入容器

什么情况下不建议使用 Flexbox ？

虽然 Flexbox 非常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使用 Flexbox 布局：

  • 1、整体页面布局
  • 2、完全支持旧浏览器的网站

浏览器支持 Flexbox 的情况：

9f4d89f8d6b508e49e44aa62457c4309.png

旧版浏览器，如IE 11或更低版本，不支持或仅部分支持 Flexbox 。如果你想安全的使用页面正常呈现，你应该退回到其他的 CSS 布局方式，比如结合float 的 display: inline-block 或者 display: table 等。但是，如果您只针对现代浏览器，那么 Flexbox 绝对值得一试。

术语

在 Flexbox 模型中，有三个核心概念：
– flex 项（愚人码头注：也称 flex 子元素），需要布局的元素
– flex 容器，其包含 flex 项
– 排列方向（direction），这决定了 flex 项的布局方向（注：更多的文章叫主轴）

最好的学习方式是从经验和例子中学习，所以让我们开始吧！

Level 1 — 基础

1）创建一个 flex 容器

CSS 代码:

.flex-container {display: flex;}

代码如下：HTML：

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

CSS：

.flex-container {
 display: flex;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

c10fb70eb5dfc9e3a72ea8db84126cf9.png

要创建一个 flex 容器，您只需要将一个 display: flex 属性添加到一个元素上。默认情况下，所有的直接子元素都被认为是 flex 项，并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器，那么 flex 项将按比例缩小，直到它们适应 flex 容器宽度。

2）将 flex 项排成一列

CSS 代码:

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

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 flex-direction: column;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

62ead6ca237bdb13fcd5fda1962f67f0.png

可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。

CSS 代码:

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

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 flex-direction: column-reverse;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

03f6f42503e406e189d65635f43f59e0.png

Level 2 — 新手

1）靠右对齐的 flex 项

CSS 代码:

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

回想一下，每个 Flexbox 模型都有 flex 方向（主轴）。justify-content 用于指定 flex 项在 flex 方向（direction）上的对齐位置。在上面的例子中，justify-content:flex-end 表示 flex 项在水平方向上靠 flex 容器的末端对齐。这就是为什么他们被放在了右边。

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 justify-content: flex-end;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

2a094865363cd0d89e3aeb7c890437ef.png

2）居中对齐的 flex 项

CSS 代码:

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

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 justify-content: center;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

b4f984fbd2e86d33d394dc415f1e75b8.png

3）铺开的 flex 项

您可以通过使用以下 justify-content 属性的三个间距值之一来指定容器中 flex 项之间应显示多少空间：

  • space-evenly : flex 容器起始边缘和第一个 flex 项之间的间距和每个相邻 flex 项之间的间距是相等。（愚人码头注：该属性以前很少看到，原因是以前浏览器不支持，chrome 也是 60 版本之后才支持。延伸一下，align-content: space-evenly 也是这个逻辑，建议在 chrome 60 下查看 这个demo 。 ）
  • space-between : 任何两个相邻 flex 项之间的间距是相同的，但不一定等于第一个/最后一个 flex 项与 flex 容器边缘之间的间距;起始边缘和第一个项目之间的间距和末端边缘和最后一个项目之间的间距是相等的。
  • space-around : flex 容器中的每个 flex 项的每一侧间距都是相等的。请注意，这意味着两个相邻 flex 项之间的空间将是第一个/最后一个 flex 项与其最近边缘之间的空间的两倍。

注：网上找了一张图片能更好的解释 justify-content 属性值的表现，如图：

f50f97da28c9d424cf9dcf1645e5ee9c.png

4）flex 项在交叉轴上的对齐

CSS 代码:

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

通常，我们想沿着 flex 方向（主轴）排列 flex 项，还可以在垂直于它的方向（交叉轴）上对齐 flex 项。通过设置 justify-content:center和align-items:center，可以使 flex 项水平和垂直放置在 flex 容器的中心。

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 justify-content: center;
 align-items: center;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

ab25f3cb877ca91586b6211e8c9dea13.png

5）对齐某个特定的 flex 项

CSS 代码:

.flex-container {display: flex;align-items: center;}
.flex-bottom {align-self: flex-end;}

可以在某个特定的 flex 项上使用 align-self CSS 属性，来使该特定的 flex 项与容器中的其他 flex 项进行对齐。

代码如下：

HTML：

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

CSS：

.flex-container {
 display: flex;
 justify-content: center;
 align-items: center;
}
.flex-bottom {
 align-self: flex-end;
}
/* 以下为辅助样式 */
.flex-container{ 
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

43f743d4fc157ec6962a4425054cf904.png

Level 3 — 中级

1）允许 flex 项多行/列排列

CSS 代码:

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

默认情况下， flex 项不允许多行/列排列，如果 flex 容器尺寸对于所有 flex 项来说不够大，那么flex 项将被调整大小以适应单行或列排列。
通过添加 flex-wrap: wrap ，可以将溢出容器的 flex 项将被排列到另一行/列中。

代码如下：

HTML：

<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 class="flex-item">6</div>
 <div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>

CSS：

.flex-container {
 display: flex;
 justify-content: space-evenly;
 flex-wrap: wrap;
}
/* 以下为辅助样式 */
.flex-container{ 
 width:270px;
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

3bb2a4b4af3c2f3c189b13dc00e569ce.png

2）flex 项反向多行/列排列

CSS 代码:

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

flex-wrap:wrap-reverse 仍然使 flex 项以多行/列排列，但是它们从 flex 容器的末尾开始排列的。

代码如下：

HTML：

<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 class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
</div>

CSS：

.flex-container {
 display: flex;
 flex-wrap: wrap-reverse;
}
/* 以下为辅助样式 */
.flex-container{ 
 width:270px;
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

46d93f4e40cbf4dfe48d12dea98d6375.png

3）多行/列排列的 flex 项在交叉轴上的对齐方式

CSS 代码:

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

默认情况下，当 flex 容器的交叉轴（cross axis）上存在多余空间时，您可以在 flex 容器上设置 align-content，以控制 flex 项在交叉轴（cross axis）上的对齐方式。可能的值是 flex-start，flex-end，center，space-between，space-around ，space-evenly 和 stretch（默认）。

代码如下：

HTML：

<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 class="flex-item">6</div>
 <div class="flex-item">7</div>
 <div class="flex-item">8</div>
</div>

CSS：

.flex-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 align-content: space-evenly;
}
/* 以下为辅助样式 */
.flex-container{ 
 width:270px;
 height:200px;
 background-color: #F0f0f0; 
}
.flex-container .flex-item{
 padding:20px;
 height:20px;
 background-color: #B1FF84; 
}
.flex-container .flex-item:first-child{ 
 background-color: #F5DE25; 
}
.flex-container .flex-item:last-child{ 
 background-color: #90D9F7; 
}

效果如下：

2ceda45c040bb0cd91a2e4cfaec0a21a.png

更多内容请关注我！！！

weixin_39887748
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于 flex 弹性盒子布局中多行的最后一行左对齐操作
Wave__k的博客
02-24 675
flex布局是一维布局 Grid布局是二维布局。
flex将元素放在最后_前端布局——Flex弹性布局
weixin_36333122的博客
02-06 6747
本篇解释了有关flexbox的知识点内容，重点介绍父元素(flex容器)和子元素(flex元素)的不同及可能的属性。背景Flexbox Layout弹性布局模块的目的在于提供一种更有效的方式来布置、调整和页面元素在容器中分配空间，即使是未知大小或者动态的，所以称为flex。flex布局背后的主要思想是让元素在容器内改变宽高和顺序，以更好的填充空间(主要是为了自适应)。flex布局与方向无关，不像常...
设置flex中每一行的最后一个元素没有padding_CSS工程中常见问题-1
weixin_39939303的博客
11-21 685
1. 图片下方会产生几像素的空白代码：// html 显示结果如下所示：在div包裹的img中，img下面会产生几像素的空白，原因是img是一种类似text的元素，在结束的时候，会在末尾加上一个空白符解决办法：设置img样式为 `vertical-align: middle;` 或者 `display: block;`设置父级元素为`display: flex;`2. 超链接的颜色设置顺序a:li...
关于盒模型-webkit-box流式布局
jsonya的博客
01-23 1254
新的工作需要适配移动端，以往的float、block布局会非常麻烦且问题不断，所以尝试下-webkit-box布局。-webkit-box是css3新添加的盒子模型属性，有人称之为弹性盒模型，它的出现打破了我们经常使用的浮动布局，实现垂直等高、水平均分、按比例划分等分布方式以及如何处理可用的空间。使该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。但是它有一定的局限性，在
弹性布局如何设置最后一个元素的位置
最新发布
BradenHan的专栏
06-12 692
在弹性布局（Flexbox）中，调整最后一个元素的位置可以通过几种方式实现，具体取决于你希望达到的布局效果。
flex将元素放在最后_[万字长文]一文教你彻底精通flex布局
weixin_29001419的博客
02-01 2859
Flex布局是什么？布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox)，是一...
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种处理方式
热门推荐
九日的博客
09-21 1万+
弹性布局justify-content:space-between；最后一行元素宽度不足时左对齐的几种方法 1.列数或总数固定不变（添加占位空元素） 想要的效果： 每一页固定十个元素，最后一页数量不足十时，从左到右从上到下依次排列。 分析： 此处的情况为总数固定不变，每一页轮播图固定是十个元素。核心思想即，在最后一页，元素数量不足十的时候，用空元素补足，以达到想要的布局（即从左到右依次布局）。 解决： <view v-for="(w, j) in v" :key="j"> <view
跟面试官扯了半小时的CSS的flex弹性布局，都在这里了。【看完你会更加透彻】
01-08
在CSS中，只需设置display属性为flex或inline-flex，就可以将一个容器转变为flex容器，其内的子元素则变为flex项目。flex布局有两条主要的轴线：主轴（main axis）和交叉轴（cross axis）。主轴决定了项目的排列方向...
css3 flex布局实现平均分配元素的示例代码
11-20
` 使得元素之间的空白被平均分配，第一和最后一个元素分别贴边，其他元素则均匀间隔。 总结来说，CSS3 Flex布局通过设置 `display: flex;`、`flex-wrap`、`flex` 属性以及 `justify-content` 和 `align-items` 等...
Flex3StyleExplorer_V3.rar_Flex3 Style Explorer_Flex3StyleExplor_
09-24
Flex3StyleExplorer是一个用于探索和测试Flex3框架中各种组件样式的工具。它允许开发者直观地查看、修改和实验不同的Flex3组件样式属性，以便在实际应用中创建自定义的用户界面外观。这个工具对于理解Flex3的皮肤...
详解微信小程序之scroll-view的flex布局问题
12-08
因此，若要在 `scroll-view` 中使用 `flex` 布局，需要通过增加一个额外的容器层来包裹内容，并将 `flex` 布局应用在这个容器上，以确保滚动功能正常工作。 总结起来，微信小程序的 `scroll-view` 组件与 `flex` ...
CSS3 flex布局之快速实现BorderLayout布局
12-13
要实现一个BorderLayout，首先需要一个包含所有子元素的父容器，例如在HTML中使用`<div>`标签，并设置类名为`parent`。接下来，我们将各个子元素分别定义为`header`、`left`、`center`、`right`和`footer`，并根据...
flex布局
955姜太根的博客
04-25 291
flex布局
css布局之flex布局
qq_42369064的博客
05-29 1894
文章目录一、flex布局原理布局原理二、flex布局父项常见属性【1】flex-direction【2】justify-content【3】flex-wrap【4】align-content【5】align-items【6】flex-flow三、flex布局子项常见属性【1】flex【2】align-self【3】order 一、flex布局原理 flex是flexible Box的缩写，意思是“弹性布局”，用来为盒装模型提供最大的灵活性。任何一个容器都能指定为flex容器。 当我们为父盒子设为fle
CSS-清除多行盒子排列每行最后一个盒子外边距属性
Lycheezzj的博客
03-21 2453
在项目中我曾经碰到过多行盒子排列，为了盒子之间的间隔从而添加了margin-right属性，但在每一行的最后一个元素的margin-right属性总是会影响到盒子的布局，从而导致本应该出现在当前行最后一个的盒子因为该属性导致空间不够从而被换行到下一行进而导致的UI显示问题。 通过多次的实践思考我想到了几种解决的办法，也因此希望在这里进行心得记录，其具体的解决方法如下： ①使用结构伪类选择器进行筛选 nth-child() 在类名为test的盒子样式上则如下所示： .test:nth-child(4n){
Flex布局详细解析
前端卷王小白的博客
04-16 9632
Flex布局完整的详细解析,轻松学会并应用Flex布局
弹性布局最后一行的元素的对齐方式设置
YYJ741007的博客
08-08 1265
弹性布局最后一行子元素的对齐方式设置
flex-warp换行后之间的间隔调整
weixin_52563146的博客
08-11 1万+
flex-warp换行后之间的间隔调整 没加align-content属性之前的代码是这样的： .branchWorkshop ul{ display: flex; width: 90%; height: 100%; margin:0; padding:0; flex-wrap: wrap; /* ul盒子里面的内容水平居中 */ margin:0 auto; } 效果是这样的： 总结：没加align-content之前，元素在换行之后，剩余空间被所有行平分，各行将会伸展
flex将元素放在最后_前端学习(5): 基于 Grid 和 Flex 布局的纯CSS多Tab切换
weixin_42429893的博客
02-06 182
准备深入学习一下前端并计划每周至少写一篇关于前端的文章。这是第五篇啦。最近迷上了 Grid 和 Flex 布局，今天尝试一下用它们配合 :target 伪类选择器，模仿手机 app 上见的 Bottom navigation bar。比如微信某一屏是这样的：我们要模仿的是最底部的 tab菜单 及切换效果(点 tab 切换屏幕)。 先谈谈布局 简化后，可以认为整个屏幕是一个盒子，最下面是 ...
设置flex中每一行的最后一个元素没有padding
06-08
在使用 flex 布局时，可以通过 `:last-child` 伪类来选择每一行的最后一个元素，然后将其 `padding-right` 设置为 0，即可实现每一行的最后一个元素没有 `padding` 的效果。 示例代码如下： ```css .flex-container { display: flex; flex-wrap: wrap; /* 设置每一行的 padding */ padding: 10px; } .flex-item { /* 设置每个元素的宽度 */ width: 100px; height: 100px; background-color: #ccc; /* 设置每个元素的 padding */ padding: 10px; /* 选择每一行的最后一个元素，并将其 padding-right 设置为 0 */ flex: 1 0 auto; } .flex-item:last-child { padding-right: 0; } ``` 在上面的代码中，我们使用了 `flex: 1 0 auto;` 来让每个元素的宽度自适应，并使用 `padding: 10px;` 来为每个元素设置 `padding`。然后，通过 `:last-child` 选择器选择每一行的最后一个元素，并将其 `padding-right` 设置为 0，从而实现了每一行的最后一个元素没有 `padding` 的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值