display:flex 意思是弹性布局
首先flex的出现是为了解决哪些问题呢？
一、页面排列布局
像此图左右两个div一排显示
可以用浮动的布局方式
html部分
css部分
这种布局有两个缺点
1.需要一个空div来清除浮动，当然也可以选用其他清除浮动的方法，但此处需要清除浮动才能不影响下面的布局。
2.当.left,.right 的宽度是固定的，浏览器宽度变得过窄时，.right会被挤到下面
用display:flex布局，可以解决这两个缺点
刚吃的html部分不变，css部分不变
级元素定义display:flex,子元素宽度用flex来定义,flex:1 是均分父子级元素。占的比例相同
1:2分时
同样分为3份时
flex是所占的比例，这样的布局就方便很多。
二、div上下左右居中
我之前写过div上下左右居中的几种方法
其中有一个写了margin：auto auto；这个方法的使用前提就是先把父元素设为display:flex
html部分
css部分
在未知div宽高时，用这种方法比较方便
这是我在使用flex布局时用到的两个比较常见又好用的例子
相关推荐
自己如何建立一个网站（最简单的HTML建站的代码和建站方法）
无论是个人还是企业，如果没有接触过建站的话，一般都很想知道如何从零开始搭建自己的网站，都有哪些步骤？每一步需要做什么？网站是怎么做出来和上线的？ 企业建站的基础3元素，分别是域名，…
HTML5从入门到精通的书籍（附：html5学习VIP视频教程）
随着科学技术与信息技术急速地发展，IT行业不仅需要理论知识，更需要技术过硬、综合能力强的实用性人才。为了解决高校毕业生求职时常常因技术经验不足而被拒之门外这一现象的问题，由千锋教研…
学校网站模板免费下载（教育网站html源码）
现如今网站建设真是越来越简单了，只需要套用网站模板就可以完成网站建设，所以现在大部分的企业都会有自己专属的网站，当用户有需要的时候就会前往这些网站进行浏览。如今的社会对教育是比较看…
html网站制作案例（精选20个网站建设成功模板）
很多初学者喜欢自己看安装视频，研究如何搭建一个网站，因为这样不仅能够学到一些关于网站建设的一些基础知识，还能够省下一大笔成本。其实如果是搭建一个模板网站并不需要会太高端的编程技术，…
卡片式布局的优点有哪些，html如何实现卡片布局
UI布局有许多种形式，而卡片式作为目前比较常见的一种，也有着它适用和不适用的场景 前言：哪些是卡片 说到卡片式设计，大家的第一反应可能是下面这样的页面。 而从广义上来说，以分隔条分…
个人网站制作方法有哪些，html个人网页制作步骤
建一个自己的网站的想法很早就有了，可无奈非科班，一些基础的东西并不了解，就一直搁置着。之后又经历过不少几次的尝试和失败，又在他人的帮助下，有了确切的方向，开始了自己网站运营的摸索之…
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。