flex与folat
先做个自我介绍，本人是刚开始学习前端的的即将毕业的大学生，目前也已经系统性的学习了一个多月了，
先说一下首先遇到的float和flex布局的区别。
首先我们知道在一个新建的html文件上添加的内容可以分为两种，它们在普通文档流上的表现不同。
一种是块级元素，< div >、< p >、 < form >等:
每个块元素都会都会独占一整行空间，在页面上默认从上向下排列。 对块的高度、宽度、margin和padding设置有效，宽度没有设置时，默认为100%。 块级元素中可以包含块级元素和行内元素。
一种是行内元素，< intput >、< a > 、< span >等，
这样的话实现文字环绕图片很是困难，float属性恰好能很简单的解决这样的问题。
以下是float布局的一些特性：
- 浮动元素只会影响写在它后面的元素，写在前面的元素如果不浮动，它是不会顶上去的，只会在下一行紧跟着。
- 如果父元素太窄，无法容纳所有的浮动元素，无法容纳的浮动元素会换行显示。
- 浮动的特殊情况，以换行的那个元素为基准，如果同行前面有浮动元素的高度大于换行的那个元素，那么当换行元素换行时会被高的那个元素“卡住”。
- 浮动元素的高度不会计算在文档流中，所以子元素浮动会造成父级盒子高度坍塌。
所以再用浮动的时候还需要使用 “清除浮动”，也就是“overflow”；
但是flex布局就不会有这样的烦恼，flex 容器中默认存在两条轴，水平主轴和垂直的侧轴，这是默认的设置。当我们设置flex-direction属性让行的方向改变为列时，会使垂直方向变为主轴，水平方向变为交叉轴。 讯享网
设置flex有以下6种属性：
- flex-direction: 决定主轴的方向(即项目的排列方向)
- flex-wrap: 决定容器内项目是否可换行
- flex-flow: flex-direction 和 flex-wrap 的简写形式
- justify-content：定义了项目在主轴的对齐方式
- align-items: 定义了项目在侧轴上的对齐方式
- align-content: 定义了多行的对齐方式，如果项目只有一行，那么该属性将不起作用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/11459.html