好吧，喝杯咖啡 （或者茶，我们不评判），让我们深入flexbox的世界！如果您曾因试图让网页在任何设备上看起来都不错而感到沮丧 – 别担心，您并不孤单。 flexbox 来拯救世界，相信我，它并不像听起来那么可怕！
flexbox 到底是什么？
flexbox 就像您的个人布局助手，可以神奇地轻松排列您的项目。了解如何设置弹性容器并轻松组织您的内容。
这种强大而高效的 css 布局模型可让您在容器内灵活地组织和对齐元素。它使项目之间的空间对齐和分配变得轻而易举，无需复杂的计算或定位调整。 flexbox 旨在以最简单的方式处理一维布局（行或列）。
让我们深入了解避免常见错误的实际示例和技巧，让您的设计保持流畅 – 就像早晨的咖啡一样。
为了更好地理解 flexbox，我们将其分为两个主要部分：
flex 容器（父容器）的属性：
弯曲方向柔性包装弹性流调整内容对齐项目对齐内容
首先，我们必须在父容器中设置“display: flex”。这会激活 flexbox 并允许将所有属性应用于容器及其项目。
display:flex
弯曲方向
flex-direction: row | row-reverse | column | column-reverse
定义容器中物品的主要方向。如果您不指定方向，则将应用默认方向：
row（默认）：项目像行一样水平组织。row-reverse：项目水平排列但反向排列。列：项目垂直组织。column-reverse：项目以相反的顺序垂直组织。####柔性包裹
flex-wrapnowrap | wrap | wrap-reverse
控制项目是否应分成多行/列：
nowrap（默认）：项目保留在单行/列上。换行：项目在不适合时换行到新行/列。反向换行：项目反向换行。
弹性流
flex-flow
flex-direction 和 flex-wrap 属性的简写，它们一起定义主轴和交叉轴。默认值：现在行换行。
证明内容合理
justify-contentflex-star | flex-end | space-between | space-around | space-evenly
沿主轴对齐项目（由 flex-direction 设置的方向）：
flex-start：项目在容器的开头对齐。flex-end：项目在容器的末尾对齐。center：项目居中对齐。space- between：项目均匀分布，项目之间有额外的空间。space-around: 项目周围有相等的空间。空间均匀：项目之间和周围的空间相等。
对齐项目
align-items stretch | flex-start | flex-end | center | baseline
在横轴上对齐项目（垂直于主轴）：
拉伸（默认）：项目拉伸以填充容器。flex-start：项目在横轴的起点对齐。flex-end：项目在横轴的末端对齐。center：项目居中对齐。基线：项目与其内容的基线对齐。
对齐内容
align-content
当有多行弹性项目时对齐容器的行：
与align-items类似的选项，但应用于多行。
此外，虽然不是 flexbox 独有的，但间隙在此处通常用于设置 flexbox 布局的样式：
gap: 10px 20px /*or*/row-gap: 10pxcolunm-gap: 20px
我们可以应用于弹性项目（子容器）的属性：
下单弹性增长伸缩收缩弹性基础弯曲自我对齐
命令
e.g., order: 2
控制弹性项目的视觉顺序。所有项目的默认值为 0，但您可以设置更高或更低的数字来更改顺序。
弹性增长
e.g., flex-grow: 1
定义如果有额外空间，项目应占用多少空间。如果所有项目都有 flex-grow: 1，它们将平均共享额外空间。
弯曲收缩
e.g., flex-shrink: 0
定义空间紧张时项目应缩小的程度。默认为1（项目可以缩小）； 0 防止收缩。
弹性基础
e.g., flex-basis: 200px
在分配空间之前设置项目的初始大小。它可以以像素、百分比或自动为单位。
弯曲
flex: [flex-grow] [flex-shrink] [flex-basis];flex: 1 1 200px;
同时设置 flex-grow、flex-shrink 和 flex-basis 的简写。例如，flex：1 1 200px；表示该项目可以以 200px 的基本尺寸放大和缩小。
自我对齐
align-selfauto | flex-start | flex-end | center | baseline | stretch
让各个项目的对齐方式与其他项目不同（覆盖align-items）。默认情况下，它使用容器的align-items值。
此代码为探索实际的 flexbox 属性和试验 css 样式提供了一个完美的起点。
Flexbox Example Item 1Item 2Item 3Item 4Item 5Item 6
当我们结束 flexbox 冒险时，让我们来谈谈 css 魔法——伪类。这些方便的工具可让您根据位置、状态或交互设置元素样式，使您的 flexbox 布局更加动态和交互。无论您是使用 :nth-child() 来替换样式、:hover 来创建微妙的动画，还是使用 :first-child 来使某个项目弹出，伪类都可以让您无需额外的 html 即可添加独特的风格。
准备好继续提升你的技能了吗？我当然是！请坚持下去，因为我的下一篇文章将更深入地探讨 css 技术，使我们的布局变得栩栩如生。我也是来这里学习和成长的，所以如果您有提示、反馈或更正，请随时发表评论。让我们一起继续建设！
以上就是掌握 Flexbox：我关于构建响应式布局的学习笔记的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1632175.html
微信扫一扫 
支付宝扫一扫 
