总结了工作中遇到的flex开发小技巧，以后需要可以拿来用。
1. 自适应内容宽度
当flex-direction设置为column时，子元素默认会充满整行。如果希望子元素根据内容自适应宽度，可以将align-self设置为baseline或flex-start。
Flexbox Example
Item 1
Item 2 with more content
Item 3
2. 特殊布局的实现
利用margin: auto可以实现一些特殊的布局效果。例如，通过设置左边的包裹div免去，直接使用margin: auto来实现结构打平一层的效果。
Flexbox Example
Centered Content
3. 交叉轴上的位置控制
使用align-self属性可以在交叉轴（Cross Axis）上对单个元素进行位置控制。这对于需要在列布局中调整个别元素位置的情况非常有用。
Flexbox Example
Item 1
Centered Item
Item 3
4. 等宽不同高度的列
通过设置flex: 1;给所有项目分配等比例宽度，同时允许它们根据内容自动调整高度。这样可以创建出等宽但不同高度的列布局。
Flexbox Example
Short content
This is a bit longer content that will make the height of this item taller than others.
Content
5. 圣杯布局
利用Flexbox可以轻松实现圣杯布局（两侧固定宽度栏，中间自适应内容区域）。关键在于设置侧边栏的order属性，以及主内容区域的flex-grow: 1;来填充剩余空间。
Flexbox Example
Main Content
6. 自适应间距
利用gap属性（CSS Grid布局中的概念）或在Flex项目之间插入伪元素来实现均匀间距。这有助于保持布局的整洁。
Flexbox Example
Item 1
Item 2
Item 3
7. 垂直居中
虽然Flexbox可以轻松实现水平和垂直居中，但初学者可能不知道如何正确设置以达到期望的效果。在容器上设置align-items: center;和justify-content: center;，或仅针对垂直居中，设置align-items: center;即可。
Flexbox Example
Centered Content
8. 避免内容溢出
当Flex容器的内容过多时，可能会导致溢出。使用flex-wrap: wrap;可以允许Flex项目换行，结合max-width或min-width限制项目的尺寸，可以避免内容溢出。
Flexbox Example
Item 1
Item 2 with more content
Item 3
Item 4
Item 5
Item 6
创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦