介绍
对于弹性布局，首先了解其概念。弹性布局，即flex box，是一种用于在容器中进行布局的CSS技术。它使得容器内的子元素能够以灵活的方式排列、对齐、分配空间，以便应对各种屏幕尺寸和设备类型。任何一个容器都可以指定为flex布局，它提供了一种更简便、更强大的方法来实现复杂的布局，相对于传统的基于浮动和定位的布局方式更为直观和易用。
容器：
.box{
display: flex;
}
行内元素:
.box{
display: inline-flex;
}
Webkit 内核浏览器，必须加-webkit前缀:
.box{
display: -webkit-flex; /* Safari */
display: flex;
}主要属性：
- justify-content；
- align-items；
- flex-direction；
- flex-wrap；
- flex-flow；
- align-content；
还有其他属性如下：
- order；
- flex-self；
- flex-grow；
- flex-shrink；
- flex-basis；
- flex；
主要概念
包括弹性容器（flex container）和弹性项目（flex item）。设置了“display：flex 或 display：inline-flex”的父元素成为一个弹性容器，它的直接子元素成为弹性项目。
弹性布局通过设置容器的“display：flex 或 display：inline-flex”来启用，从而影响其子元素的排列和对齐。弹性容器内的子元素通过设置“flex”的相关属性来控制其在主轴和交叉轴上的大小、排列、方向。
容器中默认有两条轴：水平的主轴和垂直的交叉轴。Flexbox 布局中，容器的主轴是弹性项目的排列方向，而与主轴垂直的方向被称为交叉轴。项目默认沿主轴排列。
简易学习路径：https://flexboxfroggy.com/（小青蛙游戏）
主要属性介绍
1. justify-content
主轴（main axis）上的对齐方式，水平方向为主轴。【视情况而定】
- flex-start：项目与容器左侧对齐；
- flex-end：项目与容器右侧对齐；
- center：项目与容器居中对齐；
- space-between：项目之间的间距相等，最边上的弹性项目分别与容器的左右两侧对齐；
- space-evenly：项目以等间距显示，最边上的弹性项目距离容器的左右两侧距离等于每个item之间的距离；
- space-around：项目以等间距显示，最边上的弹性项目距离容器的左右两侧距离等于每个item之间距离的一半。
2. align-items
交叉轴（cross axis）上的对齐方式，竖直方向为交叉轴。【视情况而定】
- flex-start：项目与容器顶部对齐（垂直轴的起始处）；
- flex-end：项目与容器底部对齐（垂直轴的底部）；
- center：项目与容器的垂直中心处对齐（垂直轴的中心）；
- baseline：项目显示在容器的基线处；
- stretch：物体被拉伸以适合容器（如果弹性项目item未设置高度的话）；
3. flex-direction
定义项目在容器上的放置方向，默认沿主轴从 start 向 end 排列。
- row：默认值，主轴为水平方向，起点在左端；
- row-deverse：主轴为水平方向，起点在右端；
- column：主轴为竖直方向，起点在上端；
- column-reverse：主轴为竖直方向，起点在底部。
4. flex-wrap
默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。
- nowrap：默认，单行；
- wrap：多行，项目环绕到附加行（超出一行的，自动向下排列第二行等）；
- wrap-reverse：多行，项目反向围绕到附加行。
5. flex-flow
由于 flex-direction 和 flex-wrap 经常一起使用，所以可使用 flex-flow 将两种属性结合在一起，利用简写形式将该属性表现出来。例如，可使用flex-flow:row wrap设置行并换行。
该属性的属性值可参考 flex-direction 和 flex-wrap 两种属性的属性值进行书写。文章来源：https://www.toymoban.com/news/detail-846983.html
6. align-content
设置多行的弹性项目在容器中的显示（设置行之间的间距）。文章来源地址https://www.toymoban.com/news/detail-846983.html
- flex-start：线路排列在容器顶部；
- flex-end：线路排列在容器底部；
- center：线路排列在容器垂直中心；
- space-between：各行之间间距相等，上下最边处与上下两端对齐；
- space-evenly：各行之间间距相等，上下最边处与上下两端之间的距离与各行之间间距相等；
- space-around：各行之间间距相等，上下最边处与上下两端之间的距离为各行之间间距的一半；
- stretch：默认值，物体被拉伸以适合容器（如果弹性项目item未设置高度的话）。
到了这里，关于HTML — 弹性布局（1）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术10（HTML5、CSS3、JavaScript ）CSS+DIV页面布局，固定定位，相对定位relative，绝对定位absolute，层定位的应用——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
