元素作為容器。

2. 應(yīng)用彈性布局

要將彈性布局應(yīng)用于容器，需要在CSS中將display屬性設(shè)置為flex。

.container {
  display: flex;
}

3. 設(shè)置主軸方向

通過設(shè)置flex-direction屬性，可以更改主軸的方向，有兩個(gè)主要值：row（默認(rèn)值，水平排列）和column（垂直排列）。

.container {
  display: flex;
  flex-direction: row; /* 或者 column */
}

4. 設(shè)置子元素排列方式

使用justify-content屬性設(shè)置子元素在主軸上的排列方式，常見的值有flex-start（默認(rèn)值）、flex-end、center、space-between和space-around。

.container {
  display: flex;
  justify-content: center; /* 或者 flex-start, flex-end, space-between, space-around */
}

5. 設(shè)置子元素對齊方式

使用align-items屬性設(shè)置子元素在交叉軸上的對齊方式，常見的值有stretch（默認(rèn)值）、flex-start、flex-end、center和baseline。

.container {
  display: flex;
  align-items: center; /* 或者 flex-start, flex-end, stretch, baseline */
}

6. 設(shè)置子元素大小

使用flex屬性設(shè)置子元素的大小。flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，可以將一個(gè)子元素的flex屬性設(shè)置為1，使其占據(jù)剩余空間。

.child-element {
  flex: 1;
}

相關(guān)問題與解答

問題1：如何使用彈性布局實(shí)現(xiàn)子元素的等寬排列？

答：將容器的display屬性設(shè)置為flex，然后使用flex: 1為每個(gè)子元素設(shè)置相同的寬度。

.container {
  display: flex;
}
.child-element {
  flex: 1;
}

問題2：如何實(shí)現(xiàn)子元素在垂直居中對齊？

答：將容器的display屬性設(shè)置為flex，然后使用align-items: center設(shè)置子元素在交叉軸上的對齊方式。

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

名稱欄目：html如何彈性布局
轉(zhuǎn)載來源：http://uogjgqi.cn/article/cddjsjo.html