Flex是一种用于布局和排列HTML元素的CSS属性。它涵盖了许多有用的功能来实现简单和复杂的布局需求，这篇文章将重点介绍Flex CSS的写法和使用。

.container{
display:flex;
justify-content:center; //水平居中
align-items:center; //垂直居中
}

上面的代码显示了一个.flex-container的样式，用于包含HTML元素。使用"Display"属性的值"flex"，告诉浏览器这个容器采用Flex布局。接下来使用"justify-content"和"align-items"属性设置水平和垂直居中。

.container{
display:flex;
flex-wrap:wrap; //换行
justify-content:flex-start; //左对齐
}

在这个例子中，我们设置Flex容器允许Flex项目在多个行上排列，而不是在单个行中排列。使用"flex-wrap"属性，我们将其值设置为"wrap"。接下来，我们使用"justify-content"属性，将其值设置为"flex-start"，以将Flex项目左对齐。

.container{
display:flex;
flex-direction:column; //垂直排列
justify-content:space-between; //平均分布
align-items:center; //垂直居中
}

在这个例子中，我们设置Flex容器的方向为"column"，这意味着Flex项目垂直排列。然后，我们使用"justify-content"属性，将其值设置为"space-between"，以使项目之间平均分布。最后，我们使用"align-items"属性，将其值设置为"center"，以使项目在垂直方向上居中。

总之，通过使用Flex CSS的写法和属性，我们可以轻松地控制和布置HTML元素。Flex CSS是一个非常强大的工具，可以用于创建响应式，移动友好的布局，这些布局可以自适应不同屏幕尺寸和设备。