要启用弹性布局需设置display:flex，容器属性控制子项排列方向、对齐方式和换行，子项属性定义伸缩性、尺寸与顺序，结合使用可高效实现一维布局如居中、等分和自适应结构。
要让HTML元素启用弹性布局（Flexbox），只需要在父容器上设置 display: flex 或 display: inline-flex，就能让其子元素变成弹性项目并沿主轴排列。下面详细介绍弹性布局的所有关键属性及其用法。
1. 容器属性：定义弹性容器的行为
这些属性应用于父容器（即设置了 display: flex 的元素）：
display: flex
使容器成为块级弹性容器，所有直接子元素自动成为弹性项目。
示例：
立即学习“前端免费学习笔记（深入）”；
container { display: flex;}
flex-direction
定义主轴方向，决定子元素的排列方向。
row：从左到右（默认） row-reverse：从右到左 column：从上到下 column-reverse：从下到上justify-content
定义项目在主轴上的对齐方式。
flex-start：靠主轴起点对齐（默认） flex-end：靠主轴终点对齐 center：居中对齐 space-between：两端对齐，项目间间距相等 space-around：每个项目两侧间距相等 space-evenly：项目之间及边缘间距完全相等align-items
定义项目在交叉轴上的对齐方式（垂直于主轴）。
stretch：拉伸填满容器（默认，前提是没有设置高度） flex-start：顶部对齐 flex-end：底部对齐 center：居中对齐 baseline：文字基线对齐align-content
当有多行弹性项目时（换行情况下），控制行与行之间的对齐方式。单行无效。
stretch：拉伸填满空间（默认） flex-start：行靠上对齐 flex-end：行靠下对齐 center：行居中 space-between：行之间均匀分布 space-around：每行周围有相等空间flex-wrap
控制是否换行。
nowrap：不换行（默认） wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方flex-flow
是 flex-direction 和 flex-wrap 的简写形式。
例如：
container { flex-flow: row wrap;}
2. 子项属性：控制每个弹性项目的具体行为
这些属性作用于弹性容器的直接子元素。
flex-grow
定义项目的放大比例，默认为0（不放大）。
如果所有项目都设为1，则等分剩余空间；某个设为2，则占据更多空间。
item { flex-grow: 1;}
flex-shrink
定义项目的缩小比例，默认为1（空间不足时自动缩小）。
设为0则不缩小。
item { flex-shrink: 0;}
flex-basis
设置项目在分配多余空间前的初始主轴尺寸，类似 width，但针对主轴。
auto：根据内容大小决定（默认） 固定值：如 100px、20%
item { flex-basis: 100px;}
flex
是 flex-grow、flex-shrink、flex-basis 的简写。
常用写法：
flex: 1 等价于 flex: 1 1 0；常用于等分空间 flex: auto 等价于 flex: 1 1 auto flex: none 等价于 flex: 0 0 auto，表示不伸缩order
定义项目的排列顺序，数值越小越靠前，默认为0，可为负数。
item3 { order: -1;}
align-self
允许单个项目有与其他项目不同的对齐方式，覆盖 align-items。
auto：继承父容器的 align-items 值（默认） stretch、flex-start、flex-end、center、baseline
item2 { align-self: center;}
3. 实际使用建议
弹性布局非常适合做一维布局，比如导航栏、卡片排列、居中对齐等。
常见技巧：
水平垂直居中：display: flex; justify-content: center; align-items: center; 等分布局：flex: 1 给每个子项 圣杯布局左侧固定、右侧自适应：left { flex: 0 0 200px; } right { flex: 1; }基本上就这些。掌握这些属性后，大多数页面布局都能轻松实现。
以上就是HTML元素怎么设置弹性布局_HTMLflex弹性布局的完整属性说明的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1579927.html
微信扫一扫 
支付宝扫一扫 
