How to create a one-line flex-box only using html-CodePudding

do you know if there is a way to create a responsive flex box layout with five boxes (without using a css-file)? I can currently only use inline css in the content system.

I've searched online and tried to find the right code but it didnt work.

CodePudding user response：

You can use flexbox the same way you do in normal CSS You can add justify-content and align-items properties on "flex-container" and flex-grow flex-shrink flex-grow properties on "flex-items"

<div style="margin-top:100px; display:flex;">
  <div style="flex:1;">Home</div>
  <div style="flex:1;">Company</div>
  <div style="flex:1;">Services</div>
  <div style="flex:1;">About Us</div>
  <div style="flex:1;">Contact Us</div>
</div>

CodePudding user response：

Try the following, As you see using inline css you can create a flex box layout

<div  style="display: flex; flex-wrap: wrap;">
  <div style="width: 20%; padding: 10px;">Box 1</div>
  <div style="width: 20%; padding: 10px;">Box 2</div>
  <div style="width: 20%; padding: 10px;">Box 3</div>
  <div style="width: 20%; padding: 10px;">Box 4</div>
  <div style="width: 20%; padding: 10px;">Box 5</div>
</div>