使用Flex布局的几个小技巧（flex的几个常用布局）
总结了工作中遇到的flex开发小技巧，以后需要可以拿来用。
1. 自适应内容宽度
当flex-direction设置为column时，子元素默认会充满整行。如果希望子元素根据内容自适应宽度，可以将align-self设置为baseline或flex-start。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 200px;
border: 1px solid #000;
}
.item {
align-self: baseline; /* or flex-start */
background-color: lightblue;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2 with more content</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
2. 特殊布局的实现
利用margin: auto可以实现一些特殊的布局效果。例如，通过设置左边的包裹div免去，直接使用margin: auto来实现结构打平一层的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.inner {
margin: auto;
background-color: lightgreen;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner">Centered Content</div>
</div>
</body>
</html>
3. 交叉轴上的位置控制
使用align-self属性可以在交叉轴（Cross Axis）上对单个元素进行位置控制。这对于需要在列布局中调整个别元素位置的情况非常有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
height: 200px;
border: 1px solid #000;
}
.item {
flex: 1;
background-color: lightcoral;
margin: 5px;
}
.item-center {
align-self: center; /* Center this item vertically */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item item-center">Centered Item</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
4. 等宽不同高度的列
通过设置flex: 1;给所有项目分配等比例宽度，同时允许它们根据内容自动调整高度。这样可以创建出等宽但不同高度的列布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
border: 1px solid #000;
}
.item {
flex: 1;
background-color: lightseagreen;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Short content</div>
<div class="item">This is a bit longer content that will make the height of this item taller than others.</div>
<div class="item">Content</div>
</div>
</body>
</html>
5. 圣杯布局
利用Flexbox可以轻松实现圣杯布局（两侧固定宽度栏，中间自适应内容区域）。关键在于设置侧边栏的order属性，以及主内容区域的flex-grow: 1;来填充剩余空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
height: 100vh;
}
.sidebar {
width: 200px;
background-color: lightblue;
}
.main {
flex-grow: 1;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">Sidebar 1</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar 2</div>
</div>
</body>
</html>
6. 自适应间距
利用gap属性（CSS Grid布局中的概念）或在Flex项目之间插入伪元素来实现均匀间距。这有助于保持布局的整洁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
gap: 10px; /* Adds space between items */
border: 1px solid #000;
}
.item {
flex: 1;
background-color: lightcoral;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
7. 垂直居中
虽然Flexbox可以轻松实现水平和垂直居中，但初学者可能不知道如何正确设置以达到期望的效果。在容器上设置align-items: center;和justify-content: center;，或仅针对垂直居中，设置align-items: center;即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: center; /* Horizontal center */
align-items: center; /* Vertical center */
height: 100vh; /* Full height */
border: 1px solid #000;
}
.item {
background-color: lightpink;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Centered Content</div>
</div>
</body>
</html>
8. 避免内容溢出
当Flex容器的内容过多时，可能会导致溢出。使用flex-wrap: wrap;可以允许Flex项目换行，结合max-width或min-width限制项目的尺寸，可以避免内容溢出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap; /* Allow items to wrap */
border: 1px solid #000;
}
.item {
flex: 1 1 200px; /* Grow and shrink but not less than 200px */
background-color: lightyellow;
margin: 5px;
padding: 10px;
box-sizing: border-box; /* Include padding in width calculation */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2 with more content</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
创作不易，如果这篇文章对你有用，欢迎点赞关注加评论哦