要在应用程序中使用Flexbox,您需要使用 display 属性创建(create)/定义(define) Flex集合。
用法-
display: flex | inline-flex
该属性接受两个值
flex - 生成块级flex集合。
inline-flex - 生成一个内联flex集合。
现在,无涯教程将结合示例使用 display 属性。
以下示例演示如何创建块级Flex集合。在这里,正在创建六个具有不同颜色的盒子,并使用了flex集合来固定它们。
链接:https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flex-containers.html
来源:LearnFk无涯教程网
<!doctype html> <html lang="en"> <style> .box1{background:green;} .box2{background:blue;} .box3{background:red;} .box4{background:magenta;} .box5{background:yellow;} .box6{background:pink;} .container{ display:flex; } .box{ font-size:35px; padding:15px; } </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集合。在这里,正在创建六个具有不同颜色的盒子,并使用了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;} .container{ display:inline-flex; border:3px solid black; } .box{ font-size:35px; padding:15px; } </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集合,因此只占用了包装其元素所需的空间。
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)