search results:

    • Standard
    • React
    Learn Community
    • + D
    • Light
    • Dark
    • System
    License Pricing
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Contribute
      • Internationalization guide
    • CommercialNew
      • Pricing
      • License
      • Premium Support
    • Integrations
      • Angular
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • CARDS

    Flexbox

    Tailwind CSS Flexbox

    Use responsive flexbox component to control the initial size of flex items, how flex items grow and shrink


    Basis

    Use the basis-{size} utilities to set the initial size of flex items.

    01
    02
    03
    • HTML
            
                
            <div class="flex flex-row">
              <div class="basis-1/4">01</div>
              <div class="basis-1/4">02</div>
              <div class="basis-1/2">03</div>
            </div>
            
            
        

    Grid

    Use the grid-cols-{n} utilities to create grids with n equally sized columns.

    01
    02
    03
    04
    05
    06
    07
    08
    09
    • HTML
            
                
            <div class="grid grid-cols-4">
              <div>01</div>
              <!-- ... -->
              <div>09</div>
            </div>
            
            
        

    Rows

    Use the row-span-{n} utilities to make an element span n rows

    01
    02
    03
    • HTML
            
                
            <div class="grid grid-flow-col grid-rows-3 gap-4">
              <div class="... row-span-3">01</div>
              <div class="... col-span-2">02</div>
              <div class="... col-span-2 row-span-2">03</div>
            </div>
            
            
        

    Related resources

    Tables Dividers Spacing 2 columns layout Borders Breakpoints Center grid items Columns Flexbox Grid span Grid gap Grid size Grid column size Spacing

    If you are looking for more advanced options, try flexbox from MDBootstrap.

    • Basis
    • Grid
    • Rows
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com