Successfully reported this slideshow.
Your SlideShare is downloading. ×

Introduction to flexbox

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
CSS Flexbox and Grid Layouts
CSS Flexbox and Grid Layouts
Loading in …3
×

Check these out next

1 of 14 Ad

Introduction to flexbox

Download to read offline

Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.

Here is a small presentation on an important css3 layout property -flexbox, which renders a sense of predictability to the items assigned this property across all screen size.

Advertisement
Advertisement

More Related Content

Similar to Introduction to flexbox (20)

Recently uploaded (20)

Advertisement

Introduction to flexbox

  1. 1. INTRODUCTION TO FLEX-BOX -By Jyoti Gautam
  2. 2. What is flexbox? • A CSS3 layout mode that provides an easy and clean way to arrange items within a container. • No floats • Responsive and mobile friendly • Positioning child elements is much easier • Flex container’s margin does not collapse with the margin of its content. • Order of elements can be changed easily without changing the main HTML.
  3. 3. Flex container Flex item Cross size Main size Cross axis Main axis
  4. 4. FLEX PROPERTIES : • display : flex | inline-flex; • flex-direction: row | column; • flex-wrap: wrap | nowrap | wrap-reverse; • flex-basis:<length> • justify-content : flex-start | flex-end | center • align-self : flex-start | flex-end | center • align-items : flex-start | flex-end| center • align-content: flex-start | flex-end | center • flex-grow:<number>,flex- shrink:<number>,flex:<integer>,order:<integer>
  5. 5. flex-direction: row | column; .parent{ display:flex; flex-direction:row; //default } 1 2 3 4 5
  6. 6. .parent{ display:flex; flex-direction:column; } 2 3 4 5 1
  7. 7. Wrapping-items: .parent{ display:flex; flex-wrap:wrap; } 1 2 3 4 5 6 7 8 9
  8. 8. Aligning items justify-content align-content align-items Align items along main axis Align rows of items across cross axis Align items in a single row across cross axis
  9. 9. .parent{ display:flex; justify-content : flex-start; } .parent{ display:flex; justify-content : flex-end; } .parent{ display:flex; justify-content : center; } 1 2 3 1 2 3 1 2 3
  10. 10. .parent{ display : flex; flex-wrap : wrap; align-content : flex-start; } .parent{ display: flex; flex-wrap :wrap; align-content : flex-end; } .parent{ display : flex; flex-wrap : wrap; align-content : center; } 1 2 3 4 5 6 4 5 6 1 2 3 1 2 3 4 5 6
  11. 11. .parent{ display : flex; align-items : flex-start; } .parent{ display: flex; align-items : flex-end; } .parent{ display : flex; align-items : center ; }
  12. 12. .parent{ display : flex; align-items : stretch; //default } .box{ align-self : flex-end; //overrides individual child }
  13. 13. Ordering items .child{ order : 0; }//default 1 2 3 .box1{ order : 1 } .box3{ order : -1 } 3 2 1 Order -1 0 1
  14. 14. Flexing-items .child{ flex : 1 1 220px; } Flex is applied to child elements Flex-grow Flex-shrink Flex-basis

×