Gunakan kontainer fleksibel untuk mengelompokkan dan menyelaraskan komponen

Flex Container adalah komponen tata letak yang membantu Anda merancang dan membuat tata letak bagian di halaman web Anda. Anda dapat menggunakan kontainer fleksibel untuk mengelompokkan komponen seperti tombol, teks, gambar, dan kontainer lainnya.

Menambahkan kontainer flex

Untuk menambahkan penampung fleksibel ke halaman web Anda:

1. Buka Studio desain untuk mengedit konten dan komponen halaman Anda.

2. Pilih halaman yang ingin Anda edit.

3. Pilih bagian tempat Anda ingin menambahkan komponen kontainer fleksibel.

4. Arahkan kursor ke area kanvas yang dapat diedit, lalu pilih komponen kontainer fleksibel dari panel komponen.

Anda dapat membuat grup komponen dengan menambahkan komponen lain, seperti tombol dan teks, ke kontainer fleksibel Anda.

Anda juga dapat menata dan mengonfigurasi kontainer fleksibel Anda.

Mengedit kontainer fleksibel

Setelah Anda menambahkan kontainer fleksibel, pilih kontrol kontainer fleksibel untuk membuka bilah properti guna mengedit kontainer fleksibel Anda.

Harta benda	Keterangan
Desain	Ubah properti desain Anda untuk menyesuaikan tampilan wadah fleksibel Anda.
Edit latar belakang	Ubah warna latar belakang sesuai dengan palet warna untuk template gaya yang dipilih. aAnda juga dapat menambahkan gambar latar belakang dan menyesuaikan ukuran dan posisi.
Mengubah arah dan perataan	Sejajarkan dan ubah arah konten dalam wadah fleksibel.
Lainnya	Gandakan bagian, pindahkan ke atas atau ke bawah di dalam halaman, atau hapus bagian seluruhnya.

Properti desain

Properti desain berikut dapat dikonfigurasi di studio desain:

• Arah
• Membenarkan
• Menyelaraskan item
• Selaraskan konten

• Sejajarkan diri
• Celah
• Tumbuh fleksibel

• Menyusut fleksibel
• Dasar fleksibel
• Urutan fleksibel

Menambahkan kontainer fleksibel dalam HTML

Anda juga dapat menambahkan kontainer fleksibel langsung ke HTML halaman web Anda dengan Visual Studio Code for the Web (pratinjau).

Untuk membuat studio desain mengenali dan mengizinkan pengeditan kanvas div flexbox kustom, terapkan CSS kelas "ppFlexContainer" ke mereka.

Penting

Tanpa kelas ppFlexContainer , studio desain tidak mengenali div kustom sebagai komponen kontainer fleksibel, dan Anda tidak dapat mengeditnya di studio desain.

<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
    <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
            <div class="ppFlexContainer">
                <button type="button" class="button1">Button</button>
                <button type="button" class="button1">Button</button>
            </div>
        </div>
    </div>
</div>

Membuat tata letak kustom

Anda dapat menggunakan beberapa kontainer fleksibel untuk membuat tata letak kustom. Berikut adalah beberapa contoh dari apa yang dapat Anda lakukan.

Menyiapkan tata letak kartu

Menyiapkan kartu mengambang