grid布局兼容ie（grid布局兼容性）



HTML5弹性布局是用来为盒状模型提供最大的灵活性，优点在于其容易上手，根据flex规则很容易达到某个布局效果。任何一个容器都可以指定为Flex弹性布局。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

弹性布局( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

flex布局优缺点：

优点在于其容易上手，根据flex规则很容易达到某个布局效果。

缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

【推荐教程：CSS视频教程】

弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

弹性盒子常用属性属性描述flex-direction指定弹性容器中子元素排列方式

flex-wrap设置弹性盒子的子元素超出父容器时是否换行

flex-flowflex-direction 和 flex-wrap 的简写

align-items设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式

align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

justify-content设置弹性盒子元素在主轴(横轴)方向上的对齐方式

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/55419.html