- Flexbox教程
- Flexbox——主页
- Flexbox——概述
- Flexbox——Flex容器
- Flexbox——Flex-Direction
- Flexbox——Flex-Wrap
- Flexbox——排列内容
- Flexbox——调整项目
- Flexbox——调整内容
- Flexbox——Flex-Order
- Flexbox——灵活性
- Flexbox——调整自身
- Flexbox有用资源
- Flexbox——快速指南
- Flexbox——有用资源
- Flexbox——讨论
Flexbox——Flex容器
要在应用程序中使用Flexbox，你需要使用display属性创建/定义一个flex容器。
用法——
display: flex | inline-flex
此属性接受两个值
flex——生成块级flex容器。
inline-flex——生成内联flex容纳框。
现在，我们将使用一些例子，看看如何使用display属性。
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;}
.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值，容器使用容器（浏览器）的宽度。
可以通过如下所示向容器添加边框，观察到这一点。
.container {
display:inline-flex;
border:3px solid black;
}
它将产生以下结果——
内联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;}
.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容器，它只占据包装其元素所需的空间。
广告