水平手風琴（Horizontal Accordion）是一種在網頁設計中常用的特效，通過將內容元素的寬度進行不同程度的拉伸，實現內容的折疊和展開效果。CSS可以很方便地實現水平手風琴效果。

//HTML結構為
<div class="accordion">
<div class="item">
<h2>Item 1</h2>
<p>Content of item 1</p>
</div>
<div class="item">
<h2>Item 2</h2>
<p>Content of item 2</p>
</div>
<div class="item">
<h2>Item 3</h2>
<p>Content of item 3</p>
</div>
</div>
//CSS樣式為
.accordion {
display: flex;
width: 100%;
overflow: hidden;
}
.item {
flex-basis: 0;
flex-grow: 1;
margin-right: 10px;
transition: all 0.5s ease;
}
.item h2 {
font-size: 16px;
margin-bottom: 10px;
cursor: pointer;
}
.item p {
padding: 10px;
font-size: 14px;
line-height: 1.3;
background-color: #f5f5f5;
}
.item.active {
flex-basis: 100%;
margin-right: 0;
}

上述代碼中，.accordion類設置了display:flex，使其子元素.item元素可以被水平排列。.item元素的flex-basis屬性設置為0，即開始時它們的寬度為0，可增長的空間由flex-grow屬性控制。當某個.item元素被點擊，添加.active類時，該元素的flex-basis將變為100%，寬度擴展為所在容器的100%。

在實際應用中，可以通過JS控制點擊事件，將.active類添加或移除，實現折疊和展開的效果。