css3 flex css3教程
各位老铁们好，相信很多人对css3 flex都不是特别的了解，因此呢，今天就来为大家分享下关于css3 flex以及css3教程的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
前端应知应会:flex布局详解
前端应知应会：flex布局详解
flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。
flex布局全称flexible box布局模型，是一种比较高效的css3布局方案
通过设置元素的display属性，改成flex属性
来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。
首先看下容器的属性：
1、flex-direction
决定主轴的方向，
默认值是row即横向从左往右的顺序进行排列。
其他选项值还有row-reverse、column、column-reverse
2、flex-wrap
它决定了如果轴线排列不下去的话，如何进行换行
默认是不进行换行，继续沿着主轴方向放置。
其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反）
3、flex-flow
它是flex-firection和flex-wrap的简写
4、justify-content
该属性定义了item在主轴上的对齐方式
默认值是：flex-start即顺着主轴方向排列对齐
其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列
center：居中
space-between：两端对齐，项目之间间隔相等
space-around：每个项目两侧留白距离相等
5、align-items
该属性定义了项目在交叉轴上如何对齐
毕竟，每个item的高度不一定完全一样。
它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度
其他还有flex-start、flex-end、center、baseline
6、align-content
它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式
该参数有六个可选项：
flex-start、flex-end、center、space-between、space-around、stretch
这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。
针对item，也有一些属性可以设置
1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列
2、flex-grow，决定了item的放大比例，默认为0不进行放大。
3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小
4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配
5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式
下面再举个例子
<!DOCTYPE html>
<html lang="en">
css3的弹性框模型是什么意思
弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML、GladeXML。
使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。例子使用以下的HTML代码：
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
传统的盒模型基于HTML流在垂直方向上排列盒子。使用弹性盒模型可以规定特定的顺序，也可以反转之。要开启弹性盒模型，只需设置拥有子盒子的盒子的display的属性值为box（或inline-box）即可。
display: box;
水平或垂直分布
“box-orient”定义分布的坐标轴：vertical和horizional。这两个值定义盒子如何显示
body{
display: box;
box-orient: horizontal;
}
反向分布
“box-direction”可以设置盒子出现的顺序。默认情况下，只需定义分布坐标轴——box随html流分布。如果为水平坐标轴，则从左到右分布；垂直坐标轴则从上到下分布。定义“box-direction”的属性值为“reverse”，则反转盒子的排列顺序。
body{
display: box;
box-orient: vertical;
box-direction: reverse;
}
具体分布
属性“box-ordinal-group”定义盒子分布的顺序。可以随意的控制其分布顺序。这些组以一个从“1”开始的数字定义，盒模型将首先分布这些组，所有这些盒子将在每个组中。分布将从小到大排列。
body{
display: box;
box-orient: vertical;
box-direction: reverse;
}
#box1{
box-ordinal-group: 2;
}
#box2{
box-ordinal-group: 2;
}
#box3{
box-ordinal-group: 1;
}
盒子尺寸
默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。
如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）。
如果盒子是弹性的，其大小将按下面的方式计算：
具体的大小声明（width、height、min-width、min-height、max-width、max-height）；
父盒子的大小和所有余下的可利用的内部空间
如果盒子没有任何大小声明，那么其大小将完全取决于父box的大小。即：盒子的大小等于父级盒子的大小乘以其box-flex在所有子盒子box-flex总和中的百分比（子盒子的大小=父盒子的大小*子盒子的box-flex/所有子盒子的box-flex值的和）。
如果一个或更多的盒子有一个具体的大小声明，那么其大小将计算其中，余下的弹性盒子将按照上面的原则分享剩下的可利用空间。
看看下面的例子，理解起来更容易。
所有盒子都是弹性的
下面的例子中，box1的大小为box2的两倍，box2与box3大小一样。看起来好像是用百分比定义盒子的大小，但是有一个区别：使用弹性盒模型，增加一个盒子，无须重新计算其大小。
body{
display: box;
box-orient: horizontal;
}
#box1{
box-flex: 2;
}
#box2{
box-flex: 1;
}
#box3{
box-flex: 1;
}
一些盒子有固定大小
下面的例子中，box3并不是弹性的，宽度为160px；这样box1和box2将有240px的可利用空间。因此，box1的宽度为160px(240*2/3)，box2的宽度为80px(240*1/3)。
body{
display: box;
box-orient: horizontal;
width: 400px;
}
#box1{
box-flex: 2;
}
#box2{
box-flex: 1;
}
#box3{
width: 160px;
}
溢出管理
因为是弹性盒子、非弹性盒子混排，有可能所有盒子的尺寸大于或小于父盒子的尺寸。这样就有可能空间太多或空间不足。
空间太多如何处理
可利用空间的分布取决于两个属性值：box-align和 box-pack。
属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。
start所有盒子在父盒子的左侧，余下的空间在右侧；
end所有盒子在父盒子的右侧，余下的空间在左侧；
justify余下的空间在盒子间平均分配；
center可利用的空间在父盒子的两侧平均分配。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。
start每个盒子沿父盒子的上边缘排列，余下的空间位于底部；
end每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；
center可用空间平均分配，上面一半，下面一半；
baseline所有盒子沿着它们的基线排列，余下的空间可前可后；
stretch每个盒子的高度调整到适合父盒子的高度
body{
display: box;
box-orient: horizontal;
width: 400px;
}
#box1{
box-flex: 2;
}
#box2{
box-flex: 1;
}
#box3{
width: 160px;
}
空间不足怎么办
与传统的盒模型一样，overflow属性用来决定其显示方式。为了避免溢出，你可以设置box-lines为multiple使其换行显示。
弹性盒模型看起来很不错，Gecko和 WebKit对该模型都有一些尝试性的测试。在这些属性之前加上-moz和-webkit即可使用该属性。也即是说，firefox、safari、chrome可以使用这些特性，可以看看这个弹性盒模型的demo。
2025年css3新特性
2025年CSS3的新特性主要包括容器查询和原生嵌套选择器的高级应用。
容器查询（Container Queries）：
这是CSS3在2025年引入的一项重大更新，它标志着组件级响应式设计的重大突破。传统上，响应式设计主要依赖于视口尺寸（如通过@media查询实现），但这种方式往往无法精确控制组件在不同父容器尺寸下的样式。容器查询的引入，允许开发者根据父容器的尺寸动态调整组件的样式，从而实现了更加灵活和模块化的布局。这一特性在2025年已经得到了所有主流浏览器的全面支持，为前端开发者提供了更加强大和精细的布局控制手段。原生嵌套选择器：
在2025年，原生CSS嵌套语法也正式落地。这一特性允许开发者在CSS中嵌套选择器，使得代码结构更加清晰，维护成本更低。原生嵌套选择器的语法亮点包括使用&符号引用父选择器，支持伪类和组合选择器的嵌套，以及媒体查询的直接嵌套。这些特性不仅简化了CSS代码的编写，还避免了选择器的重复，提高了代码的可读性和可维护性。此外，CSS3在2025年依然保持着其丰富的特性集，包括盒模型和布局的增强（如box-sizing、flexbox、grid）、视觉效果（如border-radius、box-shadow、text-shadow等）、动画和过渡效果（如transition、animation）以及选择器和伪类的扩展等。这些特性为前端开发者提供了强大的工具集，使得他们能够创建出更加美观、交互性更强的网页应用。
关于本次css3 flex和css3教程的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。