认识弹性盒子的父元素属性值
flex弹性盒子
1.display:flex; 子元素是左右排列的
2.flex-direction: 布局的排列方式(主轴的排列方式)
flex-direction:
row 默认值。灵活的项目将水平显示，正如一个行一样。123
row-reverse 与 row 相同，但是以相反的顺序。321
column 灵活的项目将垂直显示，正如一个列一样。123
column-reverse 与 column 相同，但是以相反的顺序。321
3.flex-wrap: 是否换行，换列（受布局排列方式影响换行换列）
Nowrap: 默认值。规定灵活的项目不拆行或不拆列
wrap: 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse: 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。
4.flex-flow:row-reverse wrap; （复合写法）
flex-flow: flex-direction flex-wrap;
5.justify-content: 属性用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start; 默认值。项目位于容器的开头 左对齐。
flex-end; 子项目位于容器的结尾 右对齐。
center; 子项目位于容器的中心 居中。
space-between; 子项目之间留有空白，中间空白平均分配。
space-around; 子项的之前、中间、之后都有空白，两侧空白只有中间的一半。
space-evenly; 子项的之前、中间、之后都有空白，空白大小一样。
6.align-items: 子元素在行中的上下对齐方式。
stretch; 默认值。元素被拉伸以适应容器。
flex-start; 元素位于容器的开头。 顶对齐
flex-end; 元素位于容器的结尾. 底对齐
center; 元素位于容器的中心。 中间对齐
7.align-content 多行子元素在父容器中上下对齐的方式
stretch; 默认值。元素被拉伸以适应容器。
flex-start; 元素位于容器的开头。 顶对齐
flex-end; 元素位于容器的结尾. 底对齐
center; 元素位于容器的中心。 中间对齐
space-between; 子项目之间留有空白，中间空白平均分配。
space-around; 子项的之前、中间、之后都有空白，两侧空白只有中间的一半。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
