Flex弹性布局——属性总结(一)

前言

最近小程序的势头渐渐变猛,一方面有微信逐渐完善的生态社区,另一方面又有百度、阿里甚至头条都开始构建自己的小程序生态。在移动端的兼容需求越来越多,那么提高开发效率自然也就成了前端的需求,Flex布局是个好东西。

一、Flex与传统盒子的对比

传统布局的核心是盒子模型,依赖 display 属性 + position 属性 + float 属性。可以看出来传统布局非常容易实现像 word 左对齐,右对齐这样的功能,可以说,传统布局更适合于文字排版。

但是,对于垂直居中这样一些布局,以及响应式开发,虽说可以实现,但是却不够效率。使用Flex布局则有这些优势:

  • 免去了很多计算。在布局中Flex大量运用了比例的关系去映射元素的位置;
  • flex 对响应式布局的支持更好,很多时候屏幕尺寸的改变幅度大,用传统布局去更改需要计算大量坐标像素;
  • flex 支持行内元素。

二、Flex概念介绍

1、弹性盒子模型:

要灵活运用flex提供的便利,首先需要了解的是它盒子中贯彻的概念:

  • 主轴(main axis)
  • 交叉轴(cross axis)

如图:
Flex弹性布局——属性总结(一)_第1张图片

Flex中的所有属性都基于这两条轴产生作用。

三、Flex的使用

使用Flex弹性盒子的方法很简单,就是在元素的样式中加入display:flex,那么该元素包含的子元素都将对Flex的容器属性产生作用。
这里又需要区分一个概念,Flex是有容器属性子元素属性的,所谓容器属性,就是只能在父容器(父元素)中设置样式,对所有子元素产生效果的属性,而子元素属性,则是在已经设置了display:flex的父元素下的子元素,自身可以设置的属性。

(一)容器属性

1、flex-direction

定义子元素在主轴(mian axis)的排列方向

div{
	display:flex;
	/*共有四个参数*/
	flex-direction:row;(横向排列,从左到右按顺序)
	flex-direction:row-reverse;(横向排列,从右到左)
	flex-direction:column;(纵向排列,从上到下)
	flex-direction:column-reverse;(纵向排列,从下到上)
}

2、flex-wrap

定义元素是否换行

div{
	display:flex;
	/*共有四个参数*/
	flex-wrap:nowrap;(默认值,不换行,且元素的宽度设置无效)
	flex-wrap:wrap;(宽度不够自动换行,且是正序)
	flex-wrap:wrap-reverse;(宽度不够自动换行,倒序)
}

3、justify-content

子元素在主轴(main axis)上的对齐方式

div{
	display:flex;
	/*共有五个参数 */
	justify-content:flex-start;(默认值,从主轴的开始位置开始排列)
	justify-content:flex-end;(从主轴的结束位置开始排列)
	justify-content:center;(居中)
	justify-content:space-around;(两端对齐,子元素之间的间隔都相等)
	justify-content:space-between;(两端贴紧边界,子元素之间的间隔都相等)
}

4、align-content

定义了多根主轴线内元素在交叉轴(cross axis)上的对齐方式。如果整个父容器内只有一行子元素,则该属性无效

div{
	display:flex;
	/*共有五个参数 */
	align-content:flex-start;(默认值,从交叉轴的开始位置开始排列)
	align-content:flex-end;(从交叉轴的结束位置开始排列)
	align-content:center;(与交叉轴的中点对齐)
	align-content:stretch;(拉伸铺满)
	align-content:space-around;(上下两端对齐,子元素之间的间隔都相等)
	align-content:space-between;(上下端贴紧边界,子元素之间的间隔都相等)
}

5、align-items

子元素在交叉轴(cross axis)上的对齐方式

div{
	display:flex;
	/*共有五个参数 */
	align-items:flex-start;(默认值,从交叉轴的开始位置开始排列)
	align-items:flex-end;(从交叉轴的结束位置开始排列)
	align-items:center;(与交叉轴的中点对齐)
	align-items:stretch;(拉伸铺满)
	align-items:baseline;(根据子元素的第一行文字基线对齐)
	
}

以上就是所有需要写在父容器上的Flex属性了,还有需要设置在子元素的属性估计会在下一篇总结继续补充。

你可能感兴趣的:(个人心得,前端)