@extends(getTemplate() . '.layouts.app')
@push('styles_top')
    <style>
        .vertical-box {
            min-height: 60vh;
            background-color: #507eab;
        }
    </style>
@endpush
@section('content')
    <div class="container">
        <h2> Rows </h2>
        <div class="d-flex gap-5">
            <div class="border border-black p-3">
                <h2> I'm a h2 </h2>
                <p> I'm a paragraph </p>
            </div>

            <div class="border border-black p-3">
                I'm a div
            </div>
            <div class="border border-black p-3">
                I'm a div
            </div>


        </div>

        <h2> Columns </h2>
        <div class="d-flex flex-column gap-5">
            <div class="border border-black p-3">
                <h2> I'm a h2 </h2>
                <p> I'm a paragraph </p>
            </div>

            <div class="border border-black p-3">
                I'm a div
            </div>
            <div class="border border-black p-3">
                I'm a div
            </div>


        </div>

        <h2> Column & Inline Flex</h2>
        <div class="d-inline-flex flex-column gap-5">
            <div class="border border-black p-3">
                <h2> I'm a h2 </h2>
                <p> I'm a paragraph </p>
            </div>

            <div class="border border-black p-3">
                I'm a div
            </div>
            <div class="border border-black p-3">
                I'm a div
            </div>


        </div>

        <h2> Justify content center-row</h2>
        <div class="d-flex flex-row gap-5 justify-content-evenly">
            <div class="border border-black p-3">
                I'm a div
            </div>

            <div class="border border-black p-3">
                I'm a div
            </div>
            <div class="border border-black p-3">
                I'm a div
            </div>


        </div>

        <h2> Justify content Columns (y-axis) </h2>
        <div class="d-flex flex-column gap-5 p-5 vertical-box justify-content-center text-center">
            <div class="border border-black p-3 rounded">
                <h2> I'm a h2 </h2>
            </div>
        </div>

        <h2> Align items row (y-axis)</h2>
        <div class="d-lg-flex flex-row gap-5 p-5 align-items-stretch">
            <div class="border border-black p-3 rounded">
                <h2> I'm a h2 </h2>
            </div>
            <div class="border border-black p-3 rounded">
                <h2> I'm a h2 </h2>
            </div>
            <div class="border border-black p-3 rounded">
                <h2> I'm a h2 </h2>
            </div>
            <div class="border border-black p-3 rounded">
                <h2> I'm a h2 </h2>
            </div>
        </div>
        <h2> Align items column (x-axis)</h2>
        <div class="d-lg-flex flex-column gap-5 p-5 vertical-box align-items-start">

            <div class="border border-black p-3 rounded order-lg-2">
                <h2> 1 </h2>
            </div>
            <div class="border border-black p-3 rounded order-lg-0">
                <h2> 2 </h2>
            </div>
            <div class="border border-black p-3 rounded order-lg-1">
                <h2> 3 </h2>
            </div>
        </div>
    @endsection