CSS3中引入了flex屬性，可以方便地對伸縮容器中的子元素進行布局。使用flex布局時，需要將要布局的容器的display屬性設置為flex。

.container {
display: flex;
}

flex屬性有很多可選值，可以控制子元素在容器中的位置、大小和空間分配。

1. justify-content

該屬性控制子元素在容器中水平方向的分布和對齊方式。比如，可以使用justify-content: center將子元素居中顯示。

.container {
display: flex;
justify-content: center;
}

2. align-items

該屬性控制子元素在容器中垂直方向的分布和對齊方式。比如，可以使用align-items: center將子元素垂直居中顯示。

.container {
display: flex;
align-items: center;
}

3. flex-direction

該屬性控制子元素在容器中排列的方向?？梢栽O置為row（從左到右）、row-reverse（從右到左）、column（從上到下）和column-reverse（從下到上）。

.container {
display: flex;
flex-direction: column;
}

4. flex-wrap

該屬性控制子元素是否換行?？梢栽O置為nowrap（不換行）、wrap（換行，第一行在上方）、wrap-reverse（換行，第一行在下方）。

.container {
display: flex;
flex-wrap: wrap;
}

5. flex-flow

該屬性是flex-direction和flex-wrap的簡寫方式。比如，可以使用flex-flow: row wrap來同時設置子元素的排列方向和是否換行。

.container {
display: flex;
flex-flow: row wrap;
}

6. align-content

該屬性控制容器內子元素的垂直方向上的空間分配，僅在有多行的情況下生效。可以設置為flex-start（朝上對齊）、center（居中對齊）、flex-end（朝下對齊）等。

.container {
display: flex;
align-content: center;
}

7. flex

該屬性是flex-grow、flex-shrink和flex-basis的縮寫。flex-grow指定子元素的放大比例，默認為0；flex-shrink指定子元素的縮小比例，默認為1；flex-basis指定子元素在分配多余空間前的基準大小，默認為auto。

.item {
flex: 1 1 100px;
}

上述代碼設置子元素可以等分容器的多余空間，且基準大小為100px。