flex布局作业

flex是什么

flex 全称为 “Flexible Box Layout”，即 “弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化

flex布局的作用

在父内容里面垂直居中一个块内容使容器的所有子项占用等量的可用宽度高度，而不管有多少宽度高度可用使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同，，，简单来是就是能使许多不同的设备使用起来看起来都差不多不必为了一些设备去单独开发一个版本省时省力

 

容器与项目

采用 flex 布局的区域，称为 “容器”，

容器内部的元素，称为 “项目”

 

1. flex-direction 主轴方向

2. flex-wrap 主轴一行满了换行

3. flex-flow 1和2的组合

4. justify-content 主轴元素对齐方式

5. align-items 交叉轴元素对齐方式//单行

6. align-content 交叉轴行对齐方式//多行

 

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

 

 

    display: flex;

    /* 用于定义一个容器元素为flex容器，并将其子元素设置为flex项目 */

    flex-direction: column;

    /* 用于设置flex布局中主轴的方向为垂直方向 */

    justify-content: center;

    /* 用于弹性布局中的主轴对齐方式*/

 

.grids {

    /* 类选择器指定了一个网格容器 */

    display: flex;

    /*将父元素设置为display:flex;后，子元素可以自动排列在一行或一列，且自动调整宽度或高度，以适应容器的大小。 */

    flex-wrap: wrap;

    /* 使项目自动换行到下一行 */

}