flex布局

flex布局父项属性设置效果

1.flex-direction（设置主轴方向）

1.1在flex布局中，是分为主轴和侧轴俩个方向，可以叫行和列、x轴和y轴。

        默认主轴方向就是x轴反向，水平向右

        默认侧轴方向就是y轴方向，水平向下

        注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排序的。

1.2属性值

1.2.1  row （ 默认值从左到右（行））

例：flex-direction：row

1.2.2  row-reverse  从右到左

例：flex-direction：row-reverse

1.2.3  column（从上到下（列））

例：flex-direction: column

1.2.4​​​  column-reverse  从上到下

例:flex-direction: column-reverse

2.justify-content（设置主轴上的子元素排列方式）

2.1 justify-content属性定义了项目在主轴上的对齐方式

        注意：使用这个属性之前一定要确定好主轴是哪个。

2.2属性值

2.2.1  flex-start  （默认值 从头部开始 如果主轴是x轴，则从左到右）

例：justify-content: flex-start

2.2.2  flex-end（从尾部开始排序，子元素顺序不变）

例：justify-content:flex-end

2.2.3  center  （在主轴居中对齐（如果主轴是x轴则水平居中））

例：justify-content:center

2.2.4  space-around（平分剩余空间）

例：justify-content:space-aroud

2.2.5  space-between（先俩边贴边 再再平分剩余空间  （重要））

例：justify-content:space-between

3.align-items（设置侧轴上的子元素排列方式）

3.1 该属性是控制子项在侧轴（默认是y轴）上的排列方式  在子项为单项的时候使用

3.2属性值

3.2.1 flex-start（默认值 从上到下）

例：align-items:flex-start

3.2.2 flex- end （从下到上）

例：align-items: flex-end

3.2.3 centr （挤在一起（垂直居中））

例：align-items: center

3.2.4  baseline

例：align-items: baseline;