• Flex弹性盒子与容器属性
  • flex布局
  • flex容器属性
  • Flex 项目属性

Flex弹性盒子与容器属性

flex布局

Flex 布局（弹性盒子布局）是一种用于在容器中进行布局的模型，它使得容器的子元素能够以弹性的方式排列，可以配合 rem 处理尺寸以适应不同屏幕尺寸和设备。

Flex 布局在前端开发中得到了广泛的应用，因为它提供了一种相对简单而强大的布局方式。任何一个容器都可以指定为 Flex 布局，符合响应式设计的特点。

.box {
    display: flex;
}

弹性盒子特点是可以控制下级盒子的位置,

设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），如下图：

其中 flex 容器默认存在两根轴：水平的主轴（main axis）和 垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；

交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。

单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

flex 布局主要是设置 flex 容器的对齐方式和 flex 项目的大小形态，上图中的四个概念十分重要。

flex容器属性

给容器设置 display: flex;后，可以为其添加以下 6 个容器属性：

• flex-direction；
• flex-wrap；
• flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式；
• justify-content；
• align-items；
• align-content。

1. flex-direction：决定主轴的方向（即项目的排列方向）,

2.flex-wrap：默认情况下，项目都排列在一条轴线上，如果一条轴线排不下的换行方式，

3.justify-content：定义了项目在主轴上的对齐方式，

space-between与space-around最大的区别是,一个是与两端对齐,一个是与两端有间隔

4.align-items 属性定义项目在交叉轴上如何对齐。

5.align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

Flex 项目属性

上面所讲的容器属性都是用来设置项目的排列方式，而项目自身的大小和形态需要设置项目的属性，以下 5 个属性设置在项目上：

• order
• flex-grow
• flex-shrink
• flex
• align-self

1. order：默认情况下，项目的排列先后顺序是按照 DOM 结构中出现的先后顺序显示的，而 order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0，代码如下

.item {
    order: 1;
}

2.flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大，代码如下：

.item {
    flex-grow: 1; /* default 0 */
}

3.flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小，代码如下：

.item {
    flex-shrink: 3; /* default 1 */
}

4.flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto（默认缩小但不放大）。后两个属性可选。代码如下：

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

5.align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

理解 flex 布局，主要要理解容器和项目两个概念，给容器设置属性用来决定容器中的项目如何排列，如主轴方向、是否换行、主轴和交叉轴的对齐方式等，可以理解为宏观的设定。而给项目设置属性用来决定项目的大小形态顺序，可以理解为微观的设定