Flexbox布局模型通过将元素放置在一个空间分布均匀的容器内，提供了一个高效和动态的排列。这种布局使元素具有响应性，这意味着元素会根据显示它们的设备种类而改变其行为。它由两个组件组成，即柔性容器和柔性项目。然而，在这里我们将只强调柔性容器。讨论的主题是。
什么是Flex容器？
这是Flexbox的一个组件，通过将其显示方式设置为flex或inline-flex来定义祖先元素的属性。
这里解释了与柔性容器相关的属性。
Flex 容器属性
与柔性容器相关的属性。
这些属性在下面有详细解释。
flex-direction属性
为了设置Flexbox中的元素的方向，使用了flex-direction属性。
语法
flex-direction: row | row-reverse | column | column -reverse | initial | inherit;
参数解释
行：这个默认值是水平排列元素的。
row-reverse：这个值将元素放在一行中，但方向相反。
列：它垂直地安排项目。
column-reverse：它将元素安排在一列中，但方向相反。
例子
下面的例子演示了flex-direction属性的工作。
HTML
<div class="flexbox">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
在这里，我们将四个div容器嵌套在一个较大的div容器内，并给它分配了一个 "flexbox "类。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
flex-direction: row-reverse;
}
在上面的代码中，我们将较大的DIV显示为一个flex容器，并给它一些颜色，最后它的方向被设置为行逆向。
CSS
.flexbox div {
background-color: lightgrey;
width: 150px;
margin: 15px;
padding: 20px;
font-size: 35px;
}
现在，我们正在使用各种CSS属性对容器内的项目进行造型。
输出
Flex-items被放置在同一行，但顺序相反。
flex-wrap属性
这个属性说明了元素是否应该被包裹在flex line周围。
语法
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
参数解释
nowrap：此默认值不包裹元素。
wrap：如果需要，它将包裹元素。
wrap-reverse：如果需要的话，它会以一种相反的方式包装元素。
例子
以下是该属性如何在flexbox中包装项目。要看到这个属性的效果，你必须调整浏览器窗口的大小。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
flex-wrap: wrap;
}
在上面的代码中，我们已经将flex-wrap属性设置为wrap。这个值将项目包裹在一个容器内。
CSS
.flexbox div {
background-color: lightgrey;
width: 150px;
margin: 15px;
padding: 20px;
font-size: 35px;
}
使用一些基本的CSS，我们已经为我们的flex项目设计了样式。
输出
柔性项目已经被包装好了。
flex-flow属性
它说明了元素的方向，同时指定了是否要包裹元素。这是对flow-direction和flow-wrap的简写属性。
语法
flex-flow: flow-direction flow-wrap | initial | inherit;
参数解释
flow-direction。它定义了元素的方向。
flow-wrap。它规定了元素是否应该被包裹起来。
例子
请看下面的例子来理解这个属性的作用。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
flex-flow: row-reverse wrap;
}
通过使用速记属性，我们将flex项目的方向设置为行逆向，同时使用wrap值将其包裹。
输出
项目已经被反向包装成行了。
justify-content属性
如果Flexbox中的项目没有完全占用水平空间，那么justify-content属性会使它们在主轴上对齐。
语法
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
参数解释
flex-start：它将元素定位在容器的起始位置，是默认值。
flex-end：它将元素置于容器的末端。
center：它将元素置于容器的中心位置。
space-between：它在项目之间添加空间。
space-around：它在每个项目之前、之间和之后添加空间。
匀速空间：这使每个项目有相等的空间。
例子
假设你想将你的内容调整到柔性容器的末端。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
justify-content: flex-end;
}
flex-end值将把所有的flex项目定位在容器的末端。
输出
该属性工作正常。
align-items属性
该属性可设置容器中元素的垂直排列。
语法
align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
参数解释
stretch：它是一个默认值，可以拉伸项目以适应容器。
center：它将元素定位在容器的中心。
flex-start：它将元素定位在容器的起始位置，是默认值。
flex-end：这将元素置于容器的末端。
baseline（基线）：它将元素放置在容器的基线上。
例子
这里我们演示的是align-items属性的中心值。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
height: 200px;
align-items: center;
}
为了正确演示这个属性，我们为flex容器提供一些高度，并将align-items属性设置为居中。
输出
项目已经被垂直地排列在容器的中心。
align-content属性
它改变了flex-wrap属性的行为，与justify content属性非常相似，唯一的区别是它使flex元素垂直对齐。
语法
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | initial | inherit;
参数解释
flex-start：它将元素定位在容器的起始位置，是默认值。
flex-end：它将元素置于容器的末端。
center：它将元素置于容器的中心位置。
space-between：它在项目之间添加空间。
space-around：它在每个项目之前、之间和之后添加空间。
匀速空间：这使每个项目有相等的空间。
例子
要了解align-content属性如何工作，请看下面的例子。
CSS
.flexbox {
display: flex;
background-color: aquamarine;
height: 300px;
flex-wrap: wrap;
align-content: space-around;
}
这里我们进一步增加了容器的高度，以便你能更好地理解这个属性。最后，我们给align-content属性分配了space-around值。
输出
围绕每个项目的垂直空间已成功添加。
总结
Flex容器是flexbox的一个组成部分，它通过将其显示方式设置为flex或inline-flex来定义祖先元素的属性。CSS提供了许多与柔性容器相关的属性，可以用来定义柔性容器的特性。其中一些与柔性容器相关的属性有：柔性方向、对齐内容、对齐项目、柔性流等。这些属性中的每一个都将与相关的例子一起详细解释。
