写点什么

前端 flex 布局最全文档,工作学习中复习必备

发布于: 刚刚
前端flex布局最全文档,工作学习中复习必备

常用布局第二篇 —— flex 布局

回顾

在上一篇中我们结束了流式布局,流式布局中主要是说了理论的知识比较多,最主要的还是移动端中的二倍图效果是非常重要。还有对于视口的效果,末尾之后我们又说了背景缩放的问题 background-size,和特殊的样式例如兼容-webkit-等效果。基础还是需要好好学习。

flex 布局原理

flex 是 flexble Box 的缩写,意为“弹性布局”,用来为盒模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局,值得一提的是在现在大部分的工作中用 flex 布局的占比是非常大的,基本上现在较为基础的页面都是使用的 flex 布局。


  • 当我们为父盒子设为 flex 布局以后,子元素的 fkiat、clear 和 vertical-align 属性将无效

  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局

  • 采用 flex 布局的元素,称为 flex 容器(flex container),简称“容器”。它的所有子元素自动称为容器成员,称为 flex 项目(flex item)

  • 例如:一个 div 包裹了若干个 span,那么对于 div 来说就是 flex 的父容器,对于 span 来说就是 flex 的子容器。

  • 子容器可以横向排列 也可以纵向排列


总结:flex 布局原理 就是通过给父盒子添加 flex 属性,来控制子盒子的位置和排列方式

flex 布局父项常见属性

flex-direction:设置主轴的方向

  • flex-direction:row —— 默认从左到右

  • flex-direction:row-reverse —— 从右到左 如下图

  • flex-direction:column —— 从上到下

  • flex-direction:column-reverse —— 从下到上


// 默认从左到右flex-direction:row;
// 从右到左 如下图flex-direction:row-reverse;
// 从上到下flex-direction:column;
// 从下到上flex-direction:column-reverse;
复制代码



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

  • justify-content:flex-start —— 默认从头开始,如果主轴是 x 轴,则从左到右

  • justify-content:flex-end —— 从尾部开始排列

  • justify-content:center —— 在主轴居中对齐(如果主轴是 x 轴则水平居中)

  • justify-content:space-around —— 平分剩余空间

  • justify-content:space-between —— 先两边贴边,再评分剩余空间(重要)


// 默认从头开始,如果主轴是 x 轴,则从左到右justify-content:flex-start
// 从尾部开始排列justify-content:flex-end
// 在主轴居中对齐(如果主轴是 x 轴则水平居中)justify-content:center
// 平分剩余空间justify-content:space-around
// 先两边贴边,再评分剩余空间(重要)justify-content:space-between
复制代码



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

  • flex-wrap:nowrap —— 默认值,不换行

  • flex-wrap:wrap —— 换行


// 默认值,不换行flex-wrap:nowrap
// 换行flex-wrap:wrap
复制代码



注意:flex 布局中,默认的子元素是不换行的,如果装不开,会缩小子元素的宽度,放到父元素里

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

  • align-items:flex-start —— 默认值,从上到下

  • align-items:flex-end —— 从下到上

  • align-items:center —— 挤在一起(垂直居中)

  • align-items:stretch —— 拉伸


// 默认值,从上到下align-items:flex-start
// 从下到上align-items:flex-end
// 挤在一起(垂直居中)align-items:center
// 拉伸align-items:stretch
复制代码



align-content:设置侧轴上的子元素的排列方式(多行)

  • align-content:flex-start —— 默认值在侧轴的头部开始排列

  • align-content:flex-end —— 在侧轴的尾部开始排列

  • align-content:center —— 在侧轴中间显示

  • align-content:space-around —— 子项在侧轴平分剩余空间

  • align-content:space-between —— 子项在侧轴先分布两头,再平分剩余空间

  • align-content:stretch —— 设置子项元素高度平分父元素高度


// 默认值在侧轴的头部开始排列align-content:flex-start
// 在侧轴的尾部开始排列align-content:flex-end
// 在侧轴中间显示align-content:center
// 子项在侧轴平分剩余空间align-content:space-around
// 子项在侧轴先分布两头,再平分剩余空间align-content:space-between
// 设置子项元素高度平分父元素高度align-content:stretch
复制代码


注意:设置子项在侧轴上的排列方式并且只能用于子项出现 换行的情况(多行),在单行下是没有效果的



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

  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性

  • flex-flow:row wrap;


// 复合属性flex-flow:row wrap;
复制代码



flex 布局 子项 常见属性

flex:1(数字) —— 表示的是子项目分配剩余空间(占多少分)

// 表示占一份div {  flex: 1}
复制代码



align-self:控制子项自己在侧轴上的排列方式

// 控制子项自己在侧轴上的排列方式 默认为 auto,其余的值和 align-items 值一样//  表示指定的这个子项 从下到上align-self:flex-end;
复制代码



order: 属性定义项目的排列顺序

// 数值越小排名越靠前,如果不设置的话 默认为:0order: 2;
复制代码



结束

好了,今天 flex 布局 基本上就结束了,关于 flex 布局还是需要好好学习,因为接下来工作中使用 flex 布局会越来越多。需要你熟练掌握。 有问题欢迎留言~

发布于: 刚刚阅读数: 3
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
前端flex布局最全文档,工作学习中复习必备