大家好,全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅!
flex弹性盒,伸缩盒 是一种新的布局手段,主要用来代替浮动来完成页面的布局
flex可以使元素具有弹性,让元素跟随页面的大小改变而改变
弹性容器:要使用弹性盒,必须先将一个元素设置为弹性容器
通过display:flex
来设置块级弹性容器
通过display:inline-flex
设置为行内弹性容器
弹性元素:弹性容器的子元素是弹性元素(弹性项)(弹性容器的直接子元素才是弹性元素)
一个元素可以同时是弹性容器和弹性元素
弹性容器的样式
弹性元素的排列方式flex-direction
当一个元素设置为弹性容器后,可以通过flex-direction
来设置他的弹性元素的排列方式
flex-direction
可选值:
-
row
:默认值,弹性元素在容器中水平排列(主轴:左向右) -
row-reverse:弹性元素在容器中反向水平排列(主轴:右向左)
-
column
:弹性元素纵向排列(侧轴:上向下) -
column-reverse
:弹性元素反向纵向排列(侧轴:下向上)
主轴:弹性元素的排列方向为主轴
侧轴:与主轴垂直方向的称为侧轴
弹性元素的属性
flex-basic元素基础长度
flex-basic
指定弹簧的初始长度,flex-grow
指定弹簧的伸展程度flex-shrink
指定弹簧的收缩程度
这个值会和宽高度重复,所以如果flex-basic
不是auto,他就会覆盖宽度或者高度
指定的是元素在主轴上的基础长度
如果主轴是 横向的 则 该值指定的就是元素的宽度
如果主轴是 纵向的 则 该值指定的是就是元素的高度
- 默认值是 auto,表示参考元素自身的高度或宽度
- 如果传递了一个具体的数值,则以该值为准
flex-grow
:指定弹性元素伸展的系数
flex-grow
:指定弹性元素伸展的系数
当父元素有多余的空间时,子元素进行伸展
父元素的剩余空间,会按比例进行排列
所以1占伸展为宽度变成100,2伸展为宽度变成200,3伸展为宽度变成300
如果flex-grow
是0,就不进行伸展
弹性元素收缩系数flex-shrink
当父元素中空间不足以容纳所有子元素,就会对子元素进行比例的收缩。
以后需要用到浮动的时候,都可以改成使用弹性布局
flex:简写属性
flex 增长 收缩 基础长度