index.html

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Gyakorlás - Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .flex-container {
            border: 2px dashed #007bff;
            padding: 20px;
            height: 500px;
            width: 100%;
        }

        .flex-item {
            background-color: #007bff;
            color: white;
            padding: 20px;
            margin: 10px;
            text-align: center;
        }
    </style>
</head>
<body class="bg-light">

<div class="container my-5">
    <h1 class="text-center mb-4">Bootstrap Flexbox Gyakorlás</h1>

    <!-- Flexbox Tulajdonságok Beállítása -->
    <div class="card p-4 mb-4">
        <div class="row">
            <!-- Flex-Direction -->
            <div class="col-md-6">
                <h4>flex-direction</h4>
                <select id="flex-direction" class="form-select mb-3">
                    <option value="">Nincs beállítva</option>
                    <option value="flex-row">flex-row</option>
                    <option value="flex-row-reverse">flex-row-reverse</option>
                    <option value="flex-column">flex-column</option>
                    <option value="flex-column-reverse">flex-column-reverse</option>
                </select>
            </div>

            <!-- Flex-Wrap -->
            <div class="col-md-6">
                <h4>flex-wrap</h4>
                <select id="flex-wrap" class="form-select mb-3">
                    <option value="">Nincs beállítva</option>
                    <option value="flex-nowrap">flex-nowrap</option>
                    <option value="flex-wrap">flex-wrap</option>
                    <option value="flex-wrap-reverse">flex-wrap-reverse</option>
                </select>
            </div>

            <!-- Justify-Content -->
            <div class="col-md-6">
                <h4>justify-content</h4>
                <select id="justify-content" class="form-select mb-3">
                    <option value="">Nincs beállítva</option>
                    <option value="justify-content-start">justify-content-start</option>
                    <option value="justify-content-center">justify-content-center</option>
                    <option value="justify-content-end">justify-content-end</option>
                    <option value="justify-content-around">justify-content-around</option>
                    <option value="justify-content-between">justify-content-between</option>
                    <option value="justify-content-evenly">justify-content-evenly</option>
                </select>
            </div>

            <!-- Align-Items -->
            <div class="col-md-6">
                <h4>align-items</h4>
                <select id="align-items" class="form-select mb-3">
                    <option value="">Nincs beállítva</option>
                    <option value="align-items-start">align-items-start</option>
                    <option value="align-items-center">align-items-center</option>
                    <option value="align-items-end">align-items-end</option>
                    <option value="align-items-stretch">align-items-stretch</option>
                </select>
            </div>

            <!-- Align-Content -->
            <div class="col-md-6">
                <h4>align-content</h4>
                <select id="align-content" class="form-select mb-3">
                    <option value="">Nincs beállítva</option>
                    <option value="align-content-start">align-content-start</option>
                    <option value="align-content-center">align-content-center</option>
                    <option value="align-content-end">align-content-end</option>
                    <option value="align-content-around">align-content-around</option>
                    <option value="align-content-between">align-content-between</option>
                    <option value="align-content-stretch">align-content-stretch</option>
                </select>
            </div>

            <!-- Elem Szám Növelése / Csökkentése -->
            <div class="col-md-6">
                <h4>Elemek száma</h4>
                <div class="input-group mb-3">
                    <button class="btn btn-outline-secondary" type="button" id="decrease-items">-</button>
                    <input type="text" class="form-control text-center" id="item-count" value="3" readonly>
                    <button class="btn btn-outline-secondary" type="button" id="increase-items">+</button>
                </div>
            </div>

        </div>
    </div>

    <!-- Align-self beállítások az egyes elemekhez -->
    <div class="card p-4 mb-4">
        <h4>Align-self az egyes elemekhez:</h4>
        <div id="align-self-options">
            <!-- Dinamikusan generált elemek itt jelennek meg -->
        </div>
    </div>

    <!-- Flexbox Elrendezés -->
    <div class="flex-container d-flex " id="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>

    

    <!-- Kód megjelenítése -->
    <div class="card p-4 mt-4">
        <h4>Generált Kód:</h4>
        <pre id="generated-code">
&lt;div class="d-flex"&gt;
    &lt;div class="flex-item"&gt;1&lt;/div&gt;
    &lt;div class="flex-item"&gt;2&lt;/div&gt;
    &lt;div class="flex-item"&gt;3&lt;/div&gt;
&lt;/div&gt;
        </pre>
    </div>
</div>

<script>
    const flexDirectionSelect = document.getElementById('flex-direction');
    const flexWrapSelect = document.getElementById('flex-wrap');
    const justifyContentSelect = document.getElementById('justify-content');
    const alignItemsSelect = document.getElementById('align-items');
    const alignContentSelect = document.getElementById('align-content');
    const flexContainer = document.getElementById('flex-container');
    const generatedCodePre = document.getElementById('generated-code');
    const itemCountInput = document.getElementById('item-count');
    const increaseItemsButton = document.getElementById('increase-items');
    const decreaseItemsButton = document.getElementById('decrease-items');
    const alignSelfOptionsContainer = document.getElementById('align-self-options');

    let itemCount = 3;

    function createAlignSelfSelect(itemIndex) {
        const select = document.createElement('select');
        select.classList.add('form-select', 'mb-3', 'align-self-select');
        select.setAttribute('data-item-index', itemIndex);

        const options = ['Nincs beállítva', 'align-self-auto', 'align-self-start', 'align-self-center', 'align-self-end', 'align-self-stretch', 'align-self-baseline'];
        options.forEach(optionText => {
            const option = document.createElement('option');
            option.value = optionText === 'Nincs beállítva' ? '' : optionText;
            option.textContent = optionText;
            select.appendChild(option);
        });

        const label = document.createElement('label');
        label.textContent = `Elem ${itemIndex} align-self:`;
        label.classList.add('m-3');
        label.appendChild(select);

        return label;
    }

    function updateAlignSelfOptions() {
        alignSelfOptionsContainer.innerHTML = ''; // Kiüríti az előző elemeket
        for (let i = 1; i <= itemCount; i++) {
            alignSelfOptionsContainer.appendChild(createAlignSelfSelect(i));
        }

        // Minden align-self select-hez eseményfigyelőt rendelünk
        const alignSelfSelects = document.querySelectorAll('.align-self-select');
        alignSelfSelects.forEach(select => {
            select.addEventListener('change', updateFlexbox);
        });
    }

    function updateFlexbox() {
        // Olvassa a kiválasztott értékeket, ha egy érték üres (""), az azt jelenti, hogy nincs osztály
        const flexDirectionValue = ((flexDirectionSelect.value || '')==='')?'':flexDirectionSelect.value+" ";
        const flexWrapValue = ((flexWrapSelect.value || '')==='')?'':flexWrapSelect.value+" ";
        const justifyContentValue = ((justifyContentSelect.value || '')==='')?'':justifyContentSelect.value+" ";
        const alignItemsValue = ((alignItemsSelect.value || '')==='')?'':alignItemsSelect.value+" ";
        const alignContentValue = ((alignContentSelect.value || '')==='')?'':alignContentSelect.value+" ";

        // Frissíti a flex-container osztályait
        flexContainer.className = `d-flex flex-container ${flexDirectionValue} ${flexWrapValue} ${justifyContentValue} ${alignItemsValue} ${alignContentValue}`;

        // Frissíti a flex-itemek align-self tulajdonságát
        const flexItems = flexContainer.querySelectorAll('.flex-item');
        flexItems.forEach((item, index) => {
            const alignSelfSelect = document.querySelector(`.align-self-select[data-item-index="${index + 1}"]`);
            const alignSelfValue = alignSelfSelect ? alignSelfSelect.value : '';
            item.className = `flex-item ${alignSelfValue}`;
        });

        // Frissíti a generált kódot
        let itemsHtml = '';
        for (let i = 1; i <= itemCount; i++) {
            const alignSelfSelect = document.querySelector(`.align-self-select[data-item-index="${i}"]`);
            const alignSelfValue = alignSelfSelect ? alignSelfSelect.value : '';
            
            itemsHtml += alignSelfValue===''?`    <div>${i}</div>\n` : `    <div class="${alignSelfValue}`.trimEnd()+`">${i}</div>\n`;
        }

        generatedCodePre.textContent = 
((`<div class="d-flex vh-100 ${flexDirectionValue}${flexWrapValue}${justifyContentValue}${alignItemsValue}${alignContentValue}`).trim()) + `">
${itemsHtml}</div>`;
    }

    function updateItemCount() {
        // Frissíti az itemeket a flex-containerben
        flexContainer.innerHTML = '';
        for (let i = 1; i <= itemCount; i++) {
            const newItem = document.createElement('div');
            newItem.className = 'flex-item';
            newItem.textContent = i;
            flexContainer.appendChild(newItem);
        }
        updateAlignSelfOptions(); // Frissíti az align-self opciókat
        updateFlexbox();
    }

    // Eseményfigyelők a select elemekhez
    flexDirectionSelect.addEventListener('change', updateFlexbox);
    flexWrapSelect.addEventListener('change', updateFlexbox);
    justifyContentSelect.addEventListener('change', updateFlexbox);
    alignItemsSelect.addEventListener('change', updateFlexbox);
    alignContentSelect.addEventListener('change', updateFlexbox);

    // Eseményfigyelők az elem számának növeléséhez és csökkentéséhez
    increaseItemsButton.addEventListener('click', () => {
        if (itemCount < 30) {
            itemCount++;
            itemCountInput.value = itemCount;
            updateItemCount();
        }
    });

    decreaseItemsButton.addEventListener('click', () => {
        if (itemCount > 1) {
            itemCount--;
            itemCountInput.value = itemCount;
            updateItemCount();
        }
    });

    // Inicializálás
    updateItemCount();
</script>

</body>
</html>