Flexbox Simplest Start Example

To start using the Flexbox model, all you need to do is first define a flex-container.

Example

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

To use the flexbox model, you must make a parent element a flex container (aka flexible container).

You do this by setting display: flex or display: inline-flex for the inline variation. It’s that simple, and from there you’re all set to use the Flexbox model.

/*Make parent element a flex container*/
ul {
  display: flex; /*or inline-flex*/
}

gt.sandbox.checkout.commit 68cf8efc8214fbb76aed \
&& cd "${GT_SANDBOX_REPO}" \
&& cmd.run.announce "chrome ./main/index.html"

       _chrome ./main/index.html
Opening in chrome: ./main/index.html

• Flex Container