Flexbox - Tutorialspoint
Flexbox
Flexbox
About the Tutorial
Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. Flexbox layout gives complete control over the direction, alignment, order, size of the boxes. In this tutorial, we are going to learn how to use the various features available in Flexbox.
Audience
This tutorial has been prepared for beginners to make them understand the basics of Flexbox library. It will help the readers in aligning the contents of a webpage easily.
Prerequisites
For this tutorial, it is assumed that the readers have a prior knowledge of CSS and HTML
Copyright & Disclaimer
? Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@
i
Flexbox
Table of Contents
About the Tutorial ..........................................................................................................................................i Audience ........................................................................................................................................................i Prerequisites ..................................................................................................................................................i Copyright & Disclaimer ...................................................................................................................................i Table of Contents ..........................................................................................................................................ii
1. FLEXBOX OVERVIEW ...............................................................................................................1
What is Flexbox? ...........................................................................................................................................1 Features of Flexbox .......................................................................................................................................1 Supporting browsers .....................................................................................................................................2
2. FLEXBOX FLEX CONTAINERS....................................................................................................3
Flex ................................................................................................................................................................ 3 Inline flex.......................................................................................................................................................5
3. FLEXBOX FLEX-DIRECTION ......................................................................................................7
row ................................................................................................................................................................7 row-reverse ...................................................................................................................................................9 column ........................................................................................................................................................ 10 column-reverse............................................................................................................................................ 12
4. FLEXBOX FLEX-WRAP ............................................................................................................15
wrap ............................................................................................................................................................ 16 wrap-reverse ............................................................................................................................................... 17 wrap (column) ............................................................................................................................................. 19 wrap-reverse (column) ................................................................................................................................ 21
ii
Flexbox
5. FLEXBOX JUSTIFYING CONTENTS ..........................................................................................23
flex-start ...................................................................................................................................................... 24 flex-end ....................................................................................................................................................... 25 center .......................................................................................................................................................... 26 space-between ............................................................................................................................................ 28 space-around ............................................................................................................................................... 29 space-evenly ................................................................................................................................................ 31
6. FLEXBOX ALIGN ITEMS..........................................................................................................33
flex-start ...................................................................................................................................................... 33 flex-end ....................................................................................................................................................... 35 center .......................................................................................................................................................... 36 stretch ......................................................................................................................................................... 38 baseline ....................................................................................................................................................... 40
7. FLEXBOX ALIGN CONTENT ....................................................................................................42
center .......................................................................................................................................................... 42 flex-start ...................................................................................................................................................... 44 flex-end ....................................................................................................................................................... 46 stretch ......................................................................................................................................................... 48 space-around ............................................................................................................................................... 50 space-between ............................................................................................................................................ 52
8. FLEXBOX FLEX-ORDER...........................................................................................................55 9. FLEXBOX FLEXIBILITY.............................................................................................................58
flex-basis ..................................................................................................................................................... 58 flex-grow ..................................................................................................................................................... 59 flex-shrink.................................................................................................................................................... 60
iii
Flexbox flex .............................................................................................................................................................. 61
10. FLEXBOX ALIGN SELF ............................................................................................................62
flex-start ...................................................................................................................................................... 62 flex-end ....................................................................................................................................................... 64 center .......................................................................................................................................................... 65 stretch ......................................................................................................................................................... 67
iv
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- the complete beginner s guide to react html5 hive
- andb h oko glyphicons
- multiple select dropdown bootstrap example
- riptutorial
- rishabh sandil
- bootstrap tutorial stellenbosch university
- flexbox tutorialspoint
- bootstrap dropdown search box example
- semantic ui react navbar example systemax
- bootstrap notification dropdown example creer