GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||||||||||||||
GeezerVison is showing www.w3schools.com — CSS Flexbox Items
❮
❯
CSS TutorialCSS HOME CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Errors CSS Colors CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand
Code Challenge
CSS Borders
CSS Margins
CSS Padding
CSS Height / Width
CSS Box Model
CSS Outline
CSS Text
Text Color
Text Alignment
Text Decoration
Text Decoration Styles
Text Transformation
Text Spacing
Text Shadow
Code Challenge
CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand
Code Challenge
CSS Icons
CSS Links
CSS Lists
CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Position Offsets
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Opacity
CSS Navigation Bars
CSS Dropdowns
CSS Image Gallery
CSS Image Sprites
CSS Attribute Selectors
CSS Forms
CSS Counters
CSS Units
CSS Inheritance
CSS Specificity
CSS !important
CSS Math Functions
CSS Optimization
CSS Accessibility
CSS Website Layout
CSS AdvancedCSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Gradients CSS Shadows CSS Text Effects CSS Custom Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Image Styling CSS Image Modal CSS Image Centering CSS Image Filters CSS Image Shapes CSS object-fit CSS object-position CSS Masking CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS @property CSS Box Sizing CSS Functions CSS Media QueriesCSS FlexboxFlexbox Intro Flex Container Flex Items Flex ResponsiveCSS GridGrid Intro Grid Container Grid Items Grid 12-column Layout CSS @supportsCSS ResponsiveRWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD TemplatesCSS CertCSS CertificateCSS SASSSASS TutorialCSS ExamplesCSS Templates CSS Examples CSS Videos CSS Editor CSS Snippets CSS Quiz CSS Exercises CSS Code Challenges CSS Website CSS Syllabus CSS Study Plan CSS Interview PrepCSS ReferencesCSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser SupportCSS Flex Items
Share
CSS Flex ItemsThe direct child elements of a flex container automatically becomes flex items. Flex items can have the following properties:
CSS order PropertyThe The first flex item in the source code does not have to appear as the first item in the layout. The order value must be a number, and the default value is 0. ExampleThe
<div class="flex-container">
<div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div> Result: 1
2
3
4
CSS flex-grow PropertyThe The value must be a number, and the default value is 0. ExampleMake the third flex item grow four times faster than the other flex items:
<div class="flex-container">
<div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 4">3</div> </div> Result: 1
2
3
CSS flex-shrink PropertyThe The value must be a number, and the default value is 1. ExampleLet the third flex item shrink twice as much as the other flex items:
<div class="flex-container">
<div>1</div> <div>2</div> <div style="flex-shrink: 2">3</div> <div>4</div> <div>5</div> <div>6</div> </div> Result: 1
2
3
4
5
6
CSS flex-basis PropertyThe ExampleSet the initial length of the third flex item to 250 pixels:
<div class="flex-container">
<div>1</div> <div>2</div> <div style="flex-basis: 250px">3</div> <div>4</div> </div> Result: 1
2
3
4
CSS flex PropertyThe ExampleMake the third flex item growable (1), not shrinkable (0), and with an initial length of 150 pixels:
<div class="flex-container">
<div>1</div> <div>2</div> <div style="flex: 1 0 150px">3</div> <div>4</div> </div> CSS align-self PropertyThe This property overrides the default alignment set by the
container's In these examples we use a 200 pixels high container, to better demonstrate the ExampleAlign the third flex item in the middle of the container:
<div class="flex-container">
<div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div> Result: 1
2
3
4
ExampleAlign the second flex item at the top of the container, and the third flex item at the bottom of the container:
<div class="flex-container">
<div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div> Result: 1
2
3
4
The CSS Flex Items PropertiesThe following table lists all the CSS Flex Items properties:
Free account Track your progress
XP earned 0
Day streak 0
Spaces 0
League —
New Learn in Adventure Mode W3Schools Adventure AppCoding fundamentals as bite-sized lessons and challenges.
×
Contact SalesIf you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: Report ErrorIf you want to report an error, or if you want to make a suggestion, send us an e-mail: Top TutorialsHTML TutorialCSS Tutorial JavaScript Tutorial How To Tutorial SQL Tutorial Python Tutorial W3.CSS Tutorial Bootstrap Tutorial PHP Tutorial Java Tutorial C++ Tutorial jQuery Tutorial Top ReferencesHTML ReferenceCSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference AngularJS Reference jQuery Reference
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy. Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS. | ||||||||||||||
| You are visitor 01402503 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. |
