CSS flexbox - display flex and inline-flex

CSS flexbox – display flex and inline-flex

on Sep 11, 2016

CSS property display can be used to define flex box container. It can have two values:

display: flex;
display: inline-flex;

Syntax:

.someflexcontainer {
  display: flex;
}

Example – display:flex and inline-flex

In the following code, CSS property display can be changed to the following values

flex
inline-flex

<style>
.fbox {
  display: flex;
  flex-direction: row;
  width: 200px; background-color:gray;
}
.child {
  background-color:lightblue;
  padding: 3px; margin: 3px;
}
</style>

<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
</div>
<div class=fbox>
<div class="child">div1</div>
<div class="child">div2</div>
<div class="child">div3</div>
<div class="child">div4</div>
</div>

display refresh

try it online