Set the initial length of a flex item with CSS

CSSWeb DevelopmentFront End Technology

<p>Set the length of a flex item with the flex-basis CSS property.</p><h2>Example</h2><p>You can try to run the following code to implement the flex-basis property &minus;</p><p><a class="demo" href="http://tpcg.io/gYjQZy" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.mycontainer { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: orange; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.mycontainer &gt; div { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: white; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 40px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 25px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 5px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Quiz&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;mycontainer&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q1&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q2&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q3&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div style = &quot;flex-basis: 350px&quot;&gt;Q4&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q5&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q6&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q7&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q8&lt;/div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div&gt;Q9&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 04-Jul-2020 08:09:38

Advertisements