Vueに2枚の画像を1行に表示させる方法

vue で 2 つの画像を 1 行に表示するには、Flex レイアウトを使用できます。フレックス レイアウトは、さまざまな複雑なレイアウト要件を簡単に実装できる、非常に柔軟なレイアウト方法です。

以下では、vue で Flex レイアウトを使用して 2 つの画像を 1 行に表示する方法を紹介します。

1. vue プロジェクトを作成し、必要な依存関係をインストールします

まず、vue-cli を使用してターミナルで vue プロジェクトを作成します。

vue create project-name

次に、で、必要な依存関係をプロジェクトのルート ディレクトリにインストールします。

npm install vue-flexbox --save

2. vue-flexbox コンポーネント ライブラリの紹介

vue-flexbox は、Flex レイアウトに基づく Vue コンポーネント ライブラリです。さまざまなレイアウト効果を簡単に実現できます。プロジェクトに vue-flexbox を導入します。

import VueFlexbox from 'vue-flexbox';

Vue.use(VueFlexbox);

3. vue コンポーネント コードを記述します

vue コンポーネントでは、vue-flexbox のレイアウト コンポーネントを使用して次のことを実現できます。ライン表示 2枚の絵の効果。コードは次のとおりです:

<template>
  <div class="container">
    <vf-layout justify="space-between">
      <vf-layout-item>
        <img src="/path/to/image1.jpg">
      </vf-layout-item>
      <vf-layout-item>
        <img src="/path/to/image2.jpg">
      </vf-layout-item>
    </vf-layout>
  </div>
</template>

<script>
export default {
  name: 'ImageLayout',
}
</script>

<style>
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
</style>

上記のコードでは、ImageLayout という名前の vue コンポーネントを使用し、その中で

コンテナを作成し、.max- を設定することでコンテナの最大サイズを制限します。 width 属性の幅。 vf-layout では、justify 属性を「space-between」に設定します。これにより、2 つの vf-layout-item の間に空白スペースが残ります。

4. vue プロジェクトを実行します

最後に、ターミナルで次のコマンドを使用して vue プロジェクトを実行します:

npm run serve

ブラウザを開いて http にアクセスします。 ://localhost :8080 を実行すると、2 つの画像を 1 行に表示する効果がわかります。

概要

上記の手順を通じて、Flex レイアウトと vue-flexbox コンポーネント ライブラリを使用して、2 つの画像を 1 行に表示する効果を簡単に実現します。 Flex レイアウトを使用すると、さまざまなデバイスの種類や画面サイズに適応できる、柔軟でカスタマイズ可能なレイアウトを実現できます。

以上がVueに2枚の画像を1行に表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。