CSS弹性盒子.docx
5星 · 超过95%的资源 需积分: 44 67 浏览量
2020-02-29
21:21:23
上传
评论
收藏 216KB DOCX 举报 
CSS 弹性盒子
在逆战班又学习了一周，接下来讲讲我对 CSS 弹性盒子的理解。
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 exbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确
保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空
白空间。
弹性盒子中常用到的属性有：
display 指定 HTML 元素盒子类型。
ex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
ex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
ex 设置弹性盒子的子元素如何分配空间。
1. displsy : ex
通过设置 display 属性的值为 ex 或 inline-ex 将其定义为弹性容器
弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。
评论10
最新资源