Flexbox css for UI

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 element is MUCH easier
  • Flex containers margins do not collapse with the margins of its contents.
  • Order of elements can easily be changed without editing the source HTML

Flexible box model concept

  • The ability to alter items width and height to best fit in its containers available free space.
  • Flexbox is direction-agnostic
  • Built for small-scale layouts while the upcoming “Grid” specification is for more large scale

Flex Properties

displayflex | inline-flex
flex-directionrow | column
flex-wrapwrap | nowrap | wrapreverse
flex-basis<length>
justify-contentflex-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>
example with simple flex css

by kushan


avatar
  Subscribe  
Notify of