Vuejs高度的改變動(dòng)畫探索：折疊面板Collapse組件的最佳實(shí)現(xiàn)方案

示：文章尾部有全部源碼，大家可以CTRL + C直接拿走，不用謝我；當(dāng)然，我還是建議大家都能通過學(xué)習(xí)自己手寫實(shí)現(xiàn)。

使用過CSS transition屬性的童鞋們應(yīng)該都清楚，當(dāng)元素在過渡開始或者結(jié)束時(shí)的高度為auto時(shí)，動(dòng)畫是不生效的；那么如何才能實(shí)現(xiàn)元素高度的改變動(dòng)畫效果呢？本篇文章將為大家提供一個(gè)基于Vue3的非常簡潔的解決方案。

要實(shí)現(xiàn)高度的改變動(dòng)畫，我們需要在動(dòng)畫進(jìn)行之前為元素設(shè)置準(zhǔn)確的高度。

當(dāng)元素由可見變?yōu)殡[藏狀態(tài)時(shí)，我們需要先獲取元素的計(jì)算高度，將其設(shè)置到style屬性上，然后執(zhí)行一個(gè)觸發(fā)瀏覽器渲染引擎重繪的動(dòng)作，然后再將高度設(shè)置為0，這樣高度的改變動(dòng)畫就會(huì)正常進(jìn)行。

當(dāng)元素由隱藏變?yōu)榭梢姞顟B(tài)時(shí)，我們需要先將高度設(shè)置為auto，然后獲取元素的計(jì)算高度，再將高度設(shè)置為0，然后執(zhí)行一個(gè)觸發(fā)瀏覽器渲染引擎重繪的動(dòng)作，然后再將高度設(shè)置為計(jì)算高度，這樣高度的改變動(dòng)畫就會(huì)正常進(jìn)行。

現(xiàn)在，根據(jù)以上實(shí)現(xiàn)原理分析，我們創(chuàng)建一個(gè)高度的改變動(dòng)畫通用組件CollapseTransition.vue。該組件非常簡單，僅需30多行代碼。我?guī)缀趺啃写a都有注釋，大家應(yīng)該能看懂吧？

<template>
  <transition v-bind="listeners">
    <!-- 當(dāng)visible的值發(fā)生改變時(shí)，過渡組件的監(jiān)聽器就會(huì)觸發(fā) -->
    <div v-show="visible" class="x-collapse-transition">
      <slot />
    </div>
  </transition>
</template>
<script setup>
defineProps({ visible: Boolean })
const listeners = {
  // 元素由隱藏變?yōu)榭梢?  onEnter (/** @type {HTMLElement} */ el) {
    el.style.height = 'auto' // 將高度設(shè)為auto，是為了獲取該元素的計(jì)算高度
    const endHeight = window.getComputedStyle(el).height // 計(jì)算高度
    el.style.height = '0px' // 將高度再設(shè)置為0
    el.offsetHeight // 強(qiáng)制重繪，重繪后再改變高度才會(huì)產(chǎn)生動(dòng)畫
    el.style.height = endHeight // 設(shè)置為計(jì)算高度
  },
  onAfterEnter (/** @type {HTMLElement} */ el) {
    el.style.height = null // 過渡進(jìn)入之后，將高度恢復(fù)為null
  },
  // 元素由可見變?yōu)殡[藏
  onLeave (/** @type {HTMLElement} */ el) {
    el.style.height = window.getComputedStyle(el).height // 計(jì)算高度
    el.offsetHeight // 強(qiáng)制重繪，重繪后再改變高度才會(huì)產(chǎn)生動(dòng)畫
    el.style.height = '0px' // 將高度設(shè)置為0
  },
  onAfterLeave (/** @type {HTMLElement} */ el) {
    el.style.height = null // 過渡離開之后，將高度恢復(fù)為null
  }
}
</script>
<style lang="scss">
  .x-collapse-transition {
    overflow: hidden;
    transition: height .22s ease-in-out;
  }
</style>

以上就是實(shí)現(xiàn)高度的改變動(dòng)畫的通用組件源碼，童鞋們理解了嗎？是不是非常簡單？現(xiàn)在，我們實(shí)現(xiàn)折疊面板組件。使用過element-ui這樣的UI庫的童鞋們應(yīng)該都知道，折疊面板是由兩個(gè)組件折疊面板Collapse和折疊面板項(xiàng)CollapseItem組合而成；

現(xiàn)在，我們先實(shí)現(xiàn)CollapseItem.vue組件。為了節(jié)省篇幅，我將源碼中的空行全部去掉了，縮進(jìn)比較規(guī)范，自認(rèn)為可讀性還行；源碼如下，一共30多行，我直接在源碼中添加了注釋，就不過多解釋了。

<template>
  <div :class="[cls, { 'is-active': isActive }]">
    <div :class="`${cls}_header`" @click="onToggle">
      <div :class="`${cls}_title`">
        <slot name="title">{{ title }}</slot>
      </div>
      <i :class="['x-icon-arrow-right', `${cls}_arrow`, { 'is-active': isActive }]"></i>
    </div>
    <x-collapse-transition :visible="isActive">
      <div :class="`${cls}_content`">
        <slot />
      </div>
    </x-collapse-transition>
  </div>
</template>
<script setup>
import { computed, inject } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 當(dāng)它是個(gè)字符串常量就行
import { N, S, B } from '../../types' // N: Number, S: String, B: Boolean
import { genKey } from '../../utils' // 生成唯一性的數(shù)值key，之前的文章中有源碼
import XCollapseTransition from './CollapseTransition.vue' // 折疊動(dòng)畫組件
const props = defineProps({
  name: [S, N],
  title: S,
  disabled: B
})
const collapse = inject(COLLAPSE_INJECT_KEY, '') // 注入折疊面板組件提供的一些屬性和方法
const cls = 'x-collapse-item'
const idKey = computed(() => props.name || genKey()) // 如果沒提供name，我們生成一個(gè)key
const isActive = computed(() => collapse.includes(idKey.value)) // 是否展開狀態(tài)
function onToggle () { // 內(nèi)容可見時(shí)隱藏，隱藏時(shí)可見
  collapse.updateModel(idKey.value)
}
</script>

這是CollapseItem.vue組件的樣式。

@import './common/var.scss';
.x-collapse-item {
  font-size: 13px;
  background-color: #fff;
  color: $--color-text-primary;
  border-bottom: 1px solid $--border-color-lighter;
  &:first-child {
    border-top: 1px solid $--border-color-lighter;
  }
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    cursor: pointer;
  }
  &_content {
    line-height: 1.8;
    padding-bottom: 25px;
  }
  &_arrow {
    margin-right: 8px;
    transition: transform .2s;
    &.is-active {
      transform: rotate(90deg);
    }
  }
}

現(xiàn)在，我們實(shí)現(xiàn)Collapse.vue組件。該組件仍然只有30多行，大家理解起來應(yīng)該很輕松，我就直接在源碼里添加注釋作為講解了；

<template>
  <div class="x-collapse">
    <slot />
  </div>
</template>
<script setup>
import { provide, reactive, ref, watch } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 一個(gè)字符串常量
import { S, B, A } from '../../types' // 參看CollapseItem組件
const props = defineProps({
  modelValue: [S, A], // Vue3使用modelValue取代了Vue2中的value
  accordion: B // 是否手風(fēng)琴模式，手風(fēng)琴模式只能有1個(gè)面板項(xiàng)是展開狀態(tài)
})
const emit = defineEmits(['update:modelValue', 'change'])
function emitValue (v) {
  emit('update:modelValue', v) // 與props.modelValue結(jié)合實(shí)現(xiàn)雙向數(shù)據(jù)綁定
  emit('change', v)
}
const model = ref(props.modelValue)
watch(() => props.modelValue, v => model.value = v)
provide(COLLAPSE_INJECT_KEY, { // 提供2個(gè)方法用于注入子組件，給子組件調(diào)用
  includes (v) { // 根據(jù)面板的key，判斷是否包含該面板項(xiàng)
    return props.accordion ? model.value === v : (model.value || []).includes(v)
  },
  updateModel (v) { // 更新面板項(xiàng)的內(nèi)容折疊和展開狀態(tài)
    const { value } = model
    if (props.accordion) {
      model.value = value === v ? null : v
      emitValue(model.value)
    } else {
      if (!value) model.value = []
      const index = model.value.indexOf(v)
      index > -1 ? model.value.splice(index, 1) : model.value.push(v)
      emitValue(model.value)
    }
  }
})
</script>

以上就是折疊面板組件的實(shí)現(xiàn)。包括折疊動(dòng)畫組件，一共僅需不到150行代碼，是不是非常簡單？童鞋們都理解了嗎？不管有什么疑問，童鞋們都可以問我。感謝閱讀！

講解CSS過渡和動(dòng)畫 transition/animation：全方位深入實(shí)踐指南

**引言：賦予網(wǎng)頁動(dòng)態(tài)生命力**

CSS過渡（Transition）與動(dòng)畫（Animation）是現(xiàn)代Web前端開發(fā)中不可或缺的設(shè)計(jì)元素，它們使靜態(tài)網(wǎng)頁變得生動(dòng)活潑，極大地提升了用戶體驗(yàn)。本文旨在以全面且易于理解的方式講解CSS過渡與動(dòng)畫的工作原理、應(yīng)用場景及其具體實(shí)現(xiàn)方法，輔以實(shí)例代碼，幫助您更好地理解和掌握這一關(guān)鍵技術(shù)。

---

### **一、CSS過渡基礎(chǔ)概念**

**標(biāo)題：走進(jìn)CSS Transition的世界**

**1. 過渡是什么？**

CSS過渡是一種視覺效果，它能夠在CSS屬性值發(fā)生變化時(shí)平滑地過渡。例如，當(dāng)鼠標(biāo)懸停在一個(gè)元素上時(shí)，其背景顏色可以從白色逐漸過渡到黑色。

**2. 如何定義過渡？**

過渡由三個(gè)關(guān)鍵部分組成：**觸發(fā)器**（何時(shí)啟動(dòng)過渡）、**持續(xù)時(shí)間**（過渡多久完成）以及**執(zhí)行方式**（如何變化）。

```css

/* 基礎(chǔ)過渡設(shè)置 */

.example {

transition: property duration timing-function delay;

}

/* 示例 */

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 0.5s ease-in-out;

}

```

在此示例中，`.box`元素的背景色會(huì)在屬性值改變時(shí)，在0.5秒內(nèi)平滑過渡。

---

### **二、過渡觸發(fā)方式**

**標(biāo)題：觸發(fā)動(dòng)畫的關(guān)鍵時(shí)刻**

過渡通常在CSS屬性值發(fā)生改變時(shí)自動(dòng)觸發(fā)，常見的觸發(fā)方式有：

- **偽類觸發(fā)**（`:hover`, `:focus`, `:active`等）

- **JavaScript操作觸發(fā)**（通過更改DOM元素樣式）

```html

<!DOCTYPE html>

<head>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transition: background-color 0.5s ease-in-out;

}

.box:hover {

background-color: blue;

}

</style>

</head>

<body>

</body>

</html>

```

在這個(gè)例子中，當(dāng)鼠標(biāo)懸停在`.box`元素上時(shí)，背景顏色會(huì)通過過渡效果變藍(lán)。

---

### **三、CSS動(dòng)畫進(jìn)階詳解**

**標(biāo)題：構(gòu)建復(fù)雜的動(dòng)畫效果**

CSS動(dòng)畫比過渡更為靈活，允許開發(fā)者定義一系列關(guān)鍵幀（@keyframes），并在指定時(shí)間段內(nèi)逐步變換樣式。

**1. 創(chuàng)建關(guān)鍵幀規(guī)則**

```css

@keyframes fadeInOut {

0% { opacity: 0; }

50% { opacity: 1; }

100% { opacity: 0; }

}

```

上述代碼定義了一個(gè)名為`fadeInOut`的動(dòng)畫，元素將在動(dòng)畫期間經(jīng)歷透明度從0到1再到0的變化。

**2. 應(yīng)用動(dòng)畫**

```css

.box {

animation-name: fadeInOut;

animation-duration: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

```

通過`animation-*`系列屬性，我們將`fadeInOut`動(dòng)畫應(yīng)用于`.box`元素，使其無限循環(huán)交替播放，每次持續(xù)2秒。

---

### **四、動(dòng)畫高級特性**

**標(biāo)題：探索動(dòng)畫的更多可能性**

- **動(dòng)畫填充模式**（animation-fill-mode）控制動(dòng)畫結(jié)束后元素的樣式狀態(tài)。

- **動(dòng)畫延時(shí)**（animation-delay）決定動(dòng)畫何時(shí)開始。

- **動(dòng)畫播放次數(shù)**（animation-iteration-count）可設(shè)置動(dòng)畫循環(huán)次數(shù)，甚至使用`infinite`無限循環(huán)。

- **動(dòng)畫方向**（animation-direction）影響動(dòng)畫是否逆序播放。

---

### **五、綜合案例分析**

**標(biāo)題：實(shí)際項(xiàng)目中的CSS過渡與動(dòng)畫運(yùn)用**

此處可以結(jié)合實(shí)際項(xiàng)目需求，給出一個(gè)或多個(gè)包含復(fù)雜過渡和動(dòng)畫交互的HTML+CSS示例，比如響應(yīng)式導(dǎo)航菜單的展開收起動(dòng)畫、輪播圖切換過渡效果等，以增強(qiáng)文章的實(shí)用性。

---

**結(jié)語：**

熟練掌握CSS過渡和動(dòng)畫，能讓您的網(wǎng)頁設(shè)計(jì)更具表現(xiàn)力和吸引力。無論是微小的UI細(xì)節(jié)還是復(fù)雜的交互場景，善用過渡和動(dòng)畫都能有效提升用戶體驗(yàn)。記住，適時(shí)適度的動(dòng)態(tài)效果才是錦上添花，過度則可能適得其反。希望通過這篇文章，您能夠洞悉CSS過渡與動(dòng)畫的奧秘，并在實(shí)踐中游刃有余地運(yùn)用這些強(qiáng)大的工具。

天我們學(xué)習(xí)的內(nèi)容有：過渡，動(dòng)畫，轉(zhuǎn)換，伸縮盒子。

可以說今天學(xué)習(xí)的內(nèi)容都是重量級的大佬，學(xué)好了，使用css3做出酷炫的效果 So Easy！~~

1.過渡

在css3中，有一個(gè)屬性可以設(shè)置過渡效果。

它就是transition，所謂的過渡效果，指的就是以動(dòng)畫的形式慢慢演化樣式屬性變化的過程。

A.案例：通過transition設(shè)置焦點(diǎn)過渡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>

注意頁面中的代碼：

第一，我們給div添加了一個(gè)hover偽類樣式，當(dāng)我們鼠標(biāo)懸停在div上方的時(shí)候，會(huì)給div盒子添加一個(gè)藍(lán)色的盒子陰影。

第二，我們給div盒子添加了一個(gè)transition樣式，設(shè)置的值為：all 1s linear 0.3s;

這四個(gè)數(shù)據(jù)分別對應(yīng)

transition-property(需要過渡的屬性)：如果設(shè)置為all表示所有樣式屬性都需要過渡。

transition-duration(過渡的時(shí)間):以秒作為單位，設(shè)置過渡的時(shí)間

transition-timing-function(過渡的方式):常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等

transition-delay(延遲的時(shí)間):以秒作為單位進(jìn)行延遲，延遲之后開始進(jìn)行過渡效果。

所以，我們通過transition這個(gè)復(fù)合屬性設(shè)置的過渡效果為：

all:需要過渡所有的屬性

1s:過渡的時(shí)間為1秒

linear:勻速過渡

0.3s:在延遲0.3秒之后開始過渡動(dòng)畫。

如果大家理解了上面的描述，那么也就不難理解咱們鼠標(biāo)放到div上之后，為啥會(huì)慢慢出現(xiàn)藍(lán)色的光暈了，就是因?yàn)樵蹅兲砑恿诉^渡，所以，慢慢的就會(huì)給盒子添加陰影效果。

2.動(dòng)畫：

在學(xué)習(xí)完了過渡之后，發(fā)現(xiàn)咱們可以使用transition去以動(dòng)畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實(shí)現(xiàn)一些過渡的動(dòng)畫。

但是，有的時(shí)候，我們的需求會(huì)更加的復(fù)雜，要求會(huì)更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復(fù)雜的效果呈現(xiàn)。

那么，動(dòng)畫animation就可以滿足我們的需要。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>

代碼效果如下：

同樣，讓我們來關(guān)注編寫的代碼：

1.在樣式中，首先我們使用@keyframes 來定義了一個(gè)復(fù)雜的動(dòng)畫，在css3中，新增了@keyframes可以來幫助我們添加動(dòng)畫。代碼如下：

/*動(dòng)畫的名字叫做moveAndChange*/

@keyframes moveAndChange{

/*動(dòng)畫最初的時(shí)候，將left設(shè)置為0px，top設(shè)置為0px*/

0%{

left:0px;

top:0px;

}

/*當(dāng)動(dòng)畫進(jìn)行到25%的時(shí)候，使用動(dòng)畫將left過渡到200px，top過渡到200px，

背景顏色過渡為綠色，圓角過渡為0(無圓角)*/

25%{

left:200px;

top:200px;

background:green;

border-radius: 0;

}

/*當(dāng)動(dòng)畫進(jìn)行到50%的時(shí)候，使用動(dòng)畫將left過渡到400px，top過渡到200px，

背景顏色過渡為藍(lán)色，圓角過渡為50%(正圓)*/

50%{

left:400px;

top:200px;

background:blue;

border-radius: 50%;

}

/*當(dāng)動(dòng)畫進(jìn)行到75%的時(shí)候，使用動(dòng)畫將left過渡到400px，top過渡到0，

背景顏色過渡為灰色，圓角過渡為0(無圓角)*/

75%{

left:400px;

top:0px;

background:#ccc;

border-radius: 0;

}

/*當(dāng)動(dòng)畫結(jié)束的時(shí)候，使用動(dòng)畫將left過渡到0x，top過渡到0px，

背景顏色過渡為紅色，圓角過渡為50%(正圓)*/

100%{

left:0px;

top:0px;

background:red;

border-radius: 50%;

}

這是一個(gè)比較復(fù)雜的動(dòng)畫效果，可以發(fā)現(xiàn)，它通過百分比的形式將一個(gè)完整的動(dòng)畫拆分成了5個(gè)部分，每個(gè)部分都有不同的樣式效果，而當(dāng)我們采用該動(dòng)畫的元素就會(huì)按照設(shè)置的順序和樣式效果進(jìn)行動(dòng)畫的過渡和展示。

2.上面我們只是通過@keyframes創(chuàng)建了一個(gè)動(dòng)畫，我們還需要通過特定的語法來使用這個(gè)動(dòng)畫。

就是下面這句代碼了：

animation: moveAndChange 5s linear 0.5s infinite normal;

它是一個(gè)復(fù)合屬性，設(shè)置了6個(gè)值，分別對應(yīng)：

animation-name(設(shè)置動(dòng)畫的名稱)：用來設(shè)置動(dòng)畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創(chuàng)建的動(dòng)畫。

animation-duration(設(shè)置整個(gè)動(dòng)畫的時(shí)間):以秒作為單位，我們這里寫的是5s，表示整個(gè)動(dòng)畫的時(shí)間為5秒

animation-timing-function(設(shè)置播放動(dòng)畫的方式)：播放動(dòng)畫的方式，常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動(dòng)畫。

animation-delay(設(shè)置動(dòng)畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動(dòng)畫。

animation-iteration-count(設(shè)置動(dòng)畫播放的次數(shù)):播放動(dòng)畫的次數(shù)，我們這里寫的是infinite ，表示動(dòng)畫將會(huì)被播放無限次，如果寫數(shù)字，那么就會(huì)播放數(shù)字對應(yīng)的次數(shù)。

animation-direction(設(shè)置是否反向播放動(dòng)畫)：我們寫的是normal，表示正常播放動(dòng)畫，如果寫的是

alternate則表示要反向播放動(dòng)畫，大家也可以自己試一試這個(gè)效果。

最終，我們通過@keyframes創(chuàng)建動(dòng)畫，通過animation設(shè)置動(dòng)畫，成功完成了這個(gè)復(fù)雜的動(dòng)畫效果。

3.轉(zhuǎn)換

在css3中，我們通過transform屬性可以設(shè)置元素的轉(zhuǎn)換效果，具體的效果如下：

A.平移

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子的位置是left:0,top:0;

但是我們通過transform: translate(300px,300px);將盒子進(jìn)行了偏移，所以，盒子的位置發(fā)生了改變。

B.旋轉(zhuǎn)

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來div盒子應(yīng)該是四四方方的。

但是，經(jīng)過我們的代碼transform: rotate(45deg); //deg為單位，表示度數(shù)。

進(jìn)行了45度的旋轉(zhuǎn)之后，呈現(xiàn)出來的就是一個(gè)菱形的盒子了，旋轉(zhuǎn)的正方向?yàn)轫槙r(shí)針，負(fù)方向?yàn)槟鏁r(shí)針。

C.縮放

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>

代碼效果如下：

如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進(jìn)行的縮放

scale的第一個(gè)參數(shù)為0.5,表示橫向縮小為0.5倍

scale的第二個(gè)參數(shù)為0.25，表示縱向縮小為0.25倍。

scale的參數(shù)如果為1，則表示不進(jìn)行任何縮放，小于1就是做縮小，而大于1表示做放大。

小結(jié)：transform轉(zhuǎn)換中其實(shí)還包含了skew(傾斜)，matrix(矩陣轉(zhuǎn)換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。

4.flex布局

Flex布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。

Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

代碼效果如下：

如圖所示，咱們通過display:flex將.parent元素設(shè)置為了flex盒子，那么子元素將會(huì)按照justify-content設(shè)置的方式進(jìn)行元素的排列，目前看來，和我們沒有設(shè)置flex盒子的效果是一致的。

接下來我們更改一下，將justify-content設(shè)置為flex-end，效果如下圖所示：

所以我們就應(yīng)該發(fā)現(xiàn)，flex-start是讓所有的子元素從父元素的左側(cè)開始排列

而flex-end是讓所有的子元素從元素的右側(cè)開始排列。

我們再來更改一下，將justify-content設(shè)置為center，效果如下圖所示：

更厲害了，子元素在父盒子的中央位置排列顯示了。

然后，我們再將justify-content設(shè)置為space-around，效果如下圖所示：

它是平均分配的形式為每一個(gè)子元素設(shè)置了間距，但是看起來有點(diǎn)變扭。

所以我們推薦將justify-content設(shè)置為space-between，效果如下圖：

我們還可以通過flex-wrap來設(shè)置子元素是否換行顯示，以及flex-direction設(shè)置子元素排列的順序。

這兩個(gè)屬性可以設(shè)置的值如下：

flex-wrap: nowrap;//不換行，會(huì)自動(dòng)收縮

flex-wrap: warp;//換行，會(huì)自動(dòng)收縮

flex-wrap: warp-reverse;//反轉(zhuǎn)，從默認(rèn)的從上到下排列反轉(zhuǎn)為從下到上。

flex-direction:row; //從左至右一行一行進(jìn)行子元素的排列

flex-direction:column; //從上到下一列一列進(jìn)行子元素的排列

flex-direction:row-reverse; //從右至左一行一行進(jìn)行子元素的排列

flex-direction:column-reverse; //從下到上一列一列進(jìn)行子元素的排列

案例代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>

我們設(shè)置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）

代碼效果如下：

如果設(shè)置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：

如果將flex-direction: column;,則會(huì)縱向排列元素，效果如下圖：

除了上面的這些給伸縮盒子父元素設(shè)置的樣式之外，我們還可以可以伸縮盒子的子元素設(shè)置flex屬性，用來設(shè)置平均分配整個(gè)父盒子的空間。

代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下：

如上圖所示，每個(gè)盒子平均分配了父盒子的空間，原本寬度為20%，現(xiàn)在被拉伸了。

除此之外，咱們還可以使用flex屬性進(jìn)行進(jìn)一步的設(shè)置，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>

效果如下圖：

我們分別給四個(gè)子盒子設(shè)置了flex:1 , flex:2, flex:2 ,flex:1.

這是什么意思呢？

四個(gè)flex加起來一共是6.那么第一個(gè)盒子就占據(jù)整個(gè)父盒子的1/6寬度。

同理，另外三個(gè)盒子分別占據(jù)2/6,2/6,1/6的寬度，所以就形成了我們現(xiàn)在看到的效果。

原文來源于：黑馬程序員社區(qū)

學(xué)習(xí)資源：

想學(xué)習(xí)css，可以關(guān)注：黑馬程序員頭條號，后臺回復(fù)：css

在線咨詢

上一篇：HTML5焦點(diǎn)圖片波浪過渡效果切換動(dòng)畫特效源碼
下一篇：JS寫的服務(wù)端，如何連接Mysql數(shù)據(jù)庫，實(shí)現(xiàn)增刪查改功能

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Vuejs高度的改變動(dòng)畫探索：折疊面板Collapse組件的最佳實(shí)現(xiàn)方案

您的項(xiàng)目需求