Have you failed a job interview?
Send us your job interview questions and get correct answers.

What is a difference between display: flex and display: inline-flex?

Experience Level: Junior
Tags: CSSFlexbox

Answer

The style display: flex will make the element a flex box container.

The style display: inline-flex will make the element a flex box container and the container will be in-line. Note that this won't make the flex items in-line. The style is applied on the container!

CSS

.container {
  display: flex;
}

.container2 {
  display: inline-flex;
}

CSS - Vertical direction

div {
  display: flex;
  justify-direction: column;
  justify-content: spacing-around;
}

Comments

No Comments Yet.
Be the first to tell us what you think.
Flexbox
Flexbox

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself
25 Flexbox questions that will help you to nail your job interview
25 Flexbox questions that will help you to nail your job interview

Are you learning Flexbox ? Try our test we designed to help you progress faster.

Test yourself