设置flex中每⼀⾏的最后⼀个元素没有padding_什么是弹性
（Flex）布局？15分钟。。。
在⽹页布局的学习中，我们经常会遇到弹性（Flex）布局，那么弹性（Flex）布局究竟是什么样⼦的呢？相信你学完了本篇⽂章就会明⽩Flex（弹性）布局的真正的意思了。
web前端学习：打造全⽹web前端全栈资料库（总⽬录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）z huanlan.zhihu 什么是Flexbox ？
Flexbox 是 flexible box 的简称（注：意思是“灵活的盒⼦容器”），是 CSS3 引⼊的新的布局模式。它决定了元素如何在页⾯上排列，使它们能在不同的屏幕尺⼨和设备下可预测地展现出来。
它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最⼤限度地填充可⽤空间。与以前布局⽅式（如 table 布局和浮动元素内嵌块元素）相⽐，Flexbox 是⼀个更强⼤的⽅式：
1、在不同⽅向排列元素
2、重新排列元素的显⽰顺序
3、更改元素的对齐⽅式
4、动态地将元素装⼊容器
什么情况下不建议使⽤ Flexbox ？
虽然 Flexbox ⾮常适合缩放，对齐和重新排序元素，但以下情况应该尽量避免使⽤ Flexbox 布局：
1、整体页⾯布局
2、完全⽀持旧浏览器的⽹站
浏览器⽀持 Flexbox 的情况：
旧版浏览器，如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：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;
}
效果如下：
要创建⼀个 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-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;
}
效果如下：
可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。
使 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-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;
}
效果如下：
新⼿
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布局对齐方式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;
}
效果如下：
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：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论