Welcome Guest! (App Version 3.1)

websitnero logo name

Flex Box

What is Flex-Box in CSS3?

CSS3 has come with a new value for display, i.e, Flex. Display: Flex is applied on a parent and then all its children can be controled via changing properties of its parent or itself.

Properties of parent will include -- flex direction, flex-wrap, flex-flow, justify-content, align-items and align-content.

Properties of children will include -- order, flex-grow, flex-shrink, flex-basis, flex and align-self.

Example

<head>
<style>
div{
  display:flex;
  border:2px solid black;
}
p{
  background:yellow;
  padding:10px;
  margin:10px;
  border:1px solid black;
}
</style>
</head>

<body>
<div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>
</body>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.