弹性盒子（Flex Box）是CSS3中引入的一种布局模型，它使得设计复杂的布局结构变得更加简单和灵活。使用Flex Box可以轻松实现水平、垂直居中，调整元素的顺序，以及适应不同屏幕尺寸等。

以下是Flex Box的一些基本属性和用法：

1. 容器属性（设置在父元素上）：

   - display： 定义一个弹性容器。
     .flex-container {
       display: flex;
     }

   - flex-direction： 定义主轴的方向（row、row-reverse、column、column-reverse）。
     .flex-container {
       flex-direction: row; /* 默认值 */
     }

   - justify-content： 定义子元素在主轴上的对齐方式。
     .flex-container {
       justify-content: space-between; /* 可选值还有flex-start, flex-end, center, space-around等 */
     }

   - align-items： 定义子元素在交叉轴上的对齐方式。
     .flex-container {
       align-items: center; /* 可选值还有flex-start, flex-end, stretch等 */
     }

   - flex-wrap： 定义子元素是否换行。
     .flex-container {
       flex-wrap: nowrap; /* 默认值，不换行；可选值还有wrap, wrap-reverse */
     }

2. 子元素属性（设置在子元素上）：

   - flex： 定义子元素的伸缩比例。
     .flex-item {
       flex: 1; /* 默认值为0 1 auto，可设置为1，2等数字，也可以设置为none */
     }

   - order： 定义子元素的排列顺序。
     .flex-item {
       order: 2; /* 默认值为0，值越小越靠前 */
     }

   - align-self： 定义子元素在交叉轴上的对齐方式，覆盖父容器的align-items。
     .flex-item {
       align-self: flex-end; /* 可选值还有flex-start, center, stretch等 */
     }

Flex Box提供了一种更直观、简单的方式来布局元素，取代了传统的一些布局方法。通过调整这些属性，你可以轻松地创建各种复杂的布局结构。在实际使用中，灵活运用Flex Box能够提高布局的效率和可读性。


转载请注明出处：http://www.zyzy.cn/article/detail/4073/CSS