A css3 layout mode that provides an easy and clean way to arrange items within a container.
display | flex | inline-flex |
flex-direction | row | column |
flex-wrap | wrap | nowrap | wrapreverse |
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> |
example 1
<!DOCTYPE html> <html> <head> <title>Flex for ui </title> </head> <style type="text/css"> .container { display: flex; } .container div { border: 1px #ccc solid; padding: 0.5rem; } .container .box-1 {flex: 1;} .container .box-2 {flex: 2;} .container .box-3 {flex: 2;} </style> <body> <div class="container"> <div class="box-1"> <h3>Box 1</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </div> <div class="box-2"> <h3>Box 2</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </div> <div class="box-3"> <h3>Box 3</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, </div> </div> </body>