认识弹性盒子的父元素属性值
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; 子项的之前、中间、之后都有空白,两侧空白只有中间的一半。
yaoqian1994
发布了3 篇原创文章 · 获赞 0 · 访问量 106
私信
关注原文地址:https://blog.csdn.net/yaoqian1994/article/details/104475161
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。