要在应用程序中使用Flexbox，您需要使用 display 属性创建(create)/定义(define) Flex集合。
用法-
display: flex | inline-flex
该属性接受两个值
flex - 生成块级flex集合。
inline-flex - 生成一个内联flex集合。
现在，无涯教程将结合示例使用 display 属性。
Flex集合
以下示例演示如何创建块级Flex集合。在这里，正在创建六个具有不同颜色的盒子，并使用了flex集合来固定它们。
<!doctype html>
<html lang="en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
</span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
display</span><span class="pun">:</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">35px</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</style>
<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>
它将产生以下输出-
由于给 display 属性赋予了 flex 值，因此集合使用集合(浏览器)的宽度。
内联Flex集合
以下示例演示如何创建内联Flex集合。在这里，正在创建六个具有不同颜色的盒子，并使用了inline-flex集合来固定它们。
<!doctype html>
<html lang="en">
<style>
.box1{background:green;}
.box2{background:blue;}
.box3{background:red;}
.box4{background:magenta;}
.box5{background:yellow;}
.box6{background:pink;}
</span><span class="pun">.</span><span class="pln">container</span><span class="pun">{</span><span class="pln">
display</span><span class="pun">:</span><span class="kwd">inline</span><span class="pun">-</span><span class="pln">flex</span><span class="pun">;</span><span class="pln">
border</span><span class="pun">:</span><span class="lit">3px</span><span class="pln"> solid black</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="pun">.</span><span class="pln">box</span><span class="pun">{</span><span class="pln">
font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="lit">35px</span><span class="pun">;</span><span class="pln">
padding</span><span class="pun">:</span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</style>
<body>
<div class="container">
<div class="box box1">One</div>
<div class="box box2">two</div>
<div class="box box3">three</div>
<div class="box box4">four</div>
<div class="box box5">five</div>
<div class="box box6">six</div>
</div>
</body>
</html>
它将产生以下输出-
由于无涯教程使用了内联flex集合，因此只占用了包装其元素所需的空间。
