Flex布局 各个属性的应用

面试被问到 你和我说一下Flex布局中的各个属性

我嘞个去 那么多 我也不常用 怎么会记得 只记得justify-content和align-items
回来和老大吐槽 没想到老大说他也这么面 这不摧残人么
身为Web前端攻城狮岂能被小小flex卡了脖子？
下定决心 血洗一波Flex

容器的一些常用属性

1. flex-direction
2. flex-wrap
3. flew-flow
4. justify-content
5. align-items
6. align-content

flex-direction4个属性设置盒子主轴的方向 （记住上下左右）
flex-direction:row | row-reverse | column | column=reverse;
1.flex-direction: row 从左到右排列

2.flex-direction:row-reverse 从右往左

*3.flex-direction:column;*自上而下

*4.flex-direction:column-reverse;*自下而上

flex-wrap3个属性超出一行该咋办
flex-wrap:nowrap | wrap | wrap-reverse;
1.flex-wrap:nowrap（不换行 变形也给我挤着）

2.flex-wrap:wrap （换行）

3.flex-wrap:wrap-reverse：下面的换到上面

flex-flow属性
flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,
第一个属性值为flex-direction的属性值
第二个属性值为flex-wrap的属性值

justify-content 6个属性 用于设置盒子的横向对齐方式
justify-content: flex-start | flex-end | center |space-between | space-around|justify-content:space-evenly
1.justify-content: flex-start：默认值，左对齐

2.justify-content:flex-end：右对齐

*3.justify-content:center：*居中对齐

*4.justify-content:space-between：*两端对齐

*5.justify-content:space-around：*每个项目两侧的间距相等

6.justify-content:space-evenly：注意区分和around的区别

align-items 5个属性用于设置盒子的竖向对齐方式
align-items:flex-start | flex-end | center | baseline | stretch
1.align-items:flex-start 向上对齐

2.align-items:flex-end 交叉轴的终点对齐

3.align-items:center 交叉轴居中对齐

4.align-items:baseline 项目的第一行文字的基线对齐

5.align-items:stretch：默认值：如果项目未设置高度或者高度为auto，将占满整个容器的高度

如果对您有帮助 点个赞吧~~三克油