一、认识flex布局
使用display:flex;开启flex container布局
二、flex布局模型
下面是官方给出的flex布局,注意主轴和交叉轴。
三、flex相关属性
(一)、flex-container几个CSS属性介绍
1、flex-direction:决定主轴的方向
2、justify-content:决定flex items主轴的对齐方式
3、align-items:决定flex items在交叉轴的对齐方式
4、flex-wrap
默认情况下,所有的flex items都会下同一行显示。设置flex-wrap:wrap即可换行显示。
5、align-content:决定多行的flex items在交叉轴上的对齐方式
(二)、flex-item几个CSS属性介绍
1、order:决定flex item排布的顺序
原文地址:https://blog.csdn.net/qq_40353662/article/details/114538736
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。