弹性盒子深度使用
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/108129847778cd1f65d99da97ff137de.png#pic_center)
一、flex使用
使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局
区别:
【注】一般是使用display:flex. inline-flex极少用。
flex:如果没有为父元素设置宽,默认为100%;
inline-flex:如果没有设置宽,,默认为所有子元素的宽的和。
二、flex-wrap属性
规定flex容器是单行还是多行,是否换行
nowrap:不换行(默认值)
wrap:换行
wrap-reverse 反向换行。
如果内容过多不换行,将自适应的缩小子元素的宽度。
三、flex-direction属性
用于设置盒子中的子元素的排列方向。
row 从左到右水平排列子元素(默认值)
column 从上往下垂直排列子元素
row-reverse 从右到左排列子元素
column-reverse 从下往上垂直排列子元素
四、justify-content属性
用于控制弹性元素在主轴上的排列方式。
flex-start 元素紧靠主轴的起点(默认值)
flex-end 元素紧靠主轴的终点
center 元素在主轴上居中。
space-between 第一元素紧靠起点,最后一个元素紧靠终点,余下的元素平均分配剩余空间。
space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 元素间距平均分配
五、align-items属性
控制元素在侧轴上的排列方式。
多行单行都适用的属性。
alingn-items
flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸 没有设置侧轴方向上的宽/高时,等于父盒子的宽或高。
六、align-content属性
控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点
center 元素在行中居中
space-between 第一个元素紧靠行的起点,最后一个元素紧靠行的终点,余下元素平均分配剩余空间
space-around 元素在侧轴方向上的间隔相等。
space-evenly 元素间距离平均分配
七、align-self属性,用于单个元素
用于控制单个元素在侧轴上的排列方式。
stretch 拉伸
flex-start 侧轴开始的地方对齐
flex-end 侧轴结束的地方对齐
center 中间对齐
八、flex-grow属性
用于将弹性盒子的可用空间,按照比例分配给弹性元素。
根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
flex: 200px 1;//子元素
九、flex-shrink属性
flex-shrink: 0 来固定元素不被挤压,子元素宽超过父元素时候
在弹性盒子装不下子元素时,对子元素缩小的比例设置。
设置或检索弹性盒的收缩比率。
根据弹性盒子元素所设置的收缩因子作为比率来收缩空间。
十、flex-basis属性
大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。
十一、order属性
用整数值来定义排列顺序,数值小的排在前面。可以为负值。