css3里flex用法

CSS3中的Flex（Flexbox）布局是一种全新的、响应式的布局方式，可以简单易用地实现复杂的页面布局效果。Flex最大的优点就是能自适应容器内的子元素，使得页面的布局更加灵活和强大。

在Flex布局中，主要有两个概念：Flex容器（Flex Container）和Flex项目（Flex Item）。Flex容器是指应用Flex属性的父元素，而Flex项目则是指包含在Flex容器内的子元素。

要使用Flex布局，我们需要在Flex容器的样式中定义display属性为flex或inline-flex，以显示子元素的Flex布局效果。同时，我们还可以使用以下属性对Flex容器进行设置：

.container {
  display: flex; /*定义为Flex容器*/
  flex-direction: row; /*沿着水平方向排列子元素*/
  justify-content: center; /*子元素在纵轴上居中对齐*/
  align-items: center; /*子元素在横轴上居中对齐*/
} 

在Flex布局中，子元素的排列可以由以下属性控制：

.item {
  flex: 1; /*自动将剩余空间平分给其他Flex项目*/
  order: 1; /*定义Flex项目出现的顺序*/
  align-self: center; /*自定义Flex项目在横轴上的对齐方式*/
} 

除了以上属性，Flex布局还具有其他实用的特性，例如Flex Wrap、Flex Flow等，我们可以据此为元素制定更具有自适应性和可塑性的布局。

总的来说，CSS3中的Flex布局为Web开发带来了更为灵活和方便的页面布局方式，一定程度上替代了传统的定位布局方式。学习并熟练掌握Flex布局，有助于提高Web页面的交互性及用户体验，也是我们前端开发者必备的技能之一。