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>