flex弹性布局 一. flex布局的特点: 1. 布局简单, 操作方便, 在移动端应用很广泛. 2. PC端部分支持, IE11以下浏览器部分支持或者不支持. 二. flex布局父子元素特点: flex布局display属性要加到父元素上面, 此时父元素称为flex容器, 所有的子元素称为容器的成员.父元素display设置为flex后,子元素的float, clear, vertical-align属性将失效.子容器可以横向排列,也可以纵向排列. 三. flex布局常用父项属性:

1. flex-direction: 设置主轴的方向:

属性值说明row默认值, 从左到右row-reverse从右到左column从上到下column-reverse从下到上

2. justify-content: 设置主轴上子元素的排列方式:

属性值说明flex-start默认值, 从头部开始, 如果主轴是x洲则从左到右flex-end从尾部开始排列center在主轴居中对齐(如果主轴是x轴则水平居中)space-around平分剩余空间space-between先两边贴边, 再平分剩余空间

3. flex-wrap: 设置子元素是否换行.

属性值说明no-wrap默认值,不换行如果装不开会缩小子元素的宽度wrap子元素的宽度超过父元素会自动换行显示

4. align-content: 设置侧轴上的子元素的排列方式(多行): 注意:只能用于子项出现换行的情况(多行),在单行时没有效果.

属性值说明flex-start默认值, 在侧轴的头部开始排列flex-end从侧轴尾部开始排列center在侧轴中间显示)space-around子项在侧轴平分剩余空间space-between子项在侧轴先两头贴边, 再平分剩余空间stretch设置子项元素高度平分父元素高度

5. align-items: 设置侧轴上子元素的排列方式(单行):

属性值说明flex-start默认值, 从上到下flex-end从下到上center挤在一起居中(垂直居中)stretch拉伸

6. flex-flow: 复合属性, 相当于同时设置了flex-direction和flex-wrap

属性值说明column wrap设置主轴为y轴,换行column no-wrap设置主轴为y轴, 不换行 四. flex布局子项常用属性:

1. flex要分配的剩余空间子项所占的份数: 如果要按照份数分配子元素所占空间, 可以不给子元素设置宽高只设置子元素flex属性所占的份数即可.这样子元素会随父元素大小变化.

属性值说明number值默认为0即不占用份数, 设置为几就是占几份

2. align-self控制子项自己在侧轴的排列方式: align-self属性允许单个项目与其他项目不一样的对齐方式, 可覆盖align-items属性. 默认值为auto, 表示继承父元素的align-items属性, 如果没有父元素, 则等同于stretch.

属性值说明flex-start默认值, 在侧轴的头部开始排列flex-end从侧轴尾部开始排列center在侧轴中间显示

3. order定义子项的排列顺序(前后顺序):

属性值说明number数字默认值为0, 数值越小排列就越靠前

阮一峰的flex教程

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。