flex弹性布局
flex布局被称为弹性布局,一旦父容器设置为 flex 布局,那么子元素的摆放方式就已经决定了。只需要考虑自身的因素来设置是否能够弹性伸缩即可。
flex布局如果没有设置摆放的方向,那么默认就是在一行中进行排列。
flex布局的常用属性
flex-direction
是CSS
中用于设置弹性容器(flex container)内弹性子项(flex item)的排列方向的属性。
.flex-container {
display: flex;
flex-direction: row; /* 水平排列 默认值,弹性子项水平排列,从左到右。*/
}
.flex-container-reverse {
display: flex;
flex-direction: row-reverse; /* 从右到左水平排列 弹性子项水平排列,从右到左。*/
}
.flex-container-column {
display: flex;
flex-direction: column; /*弹性子项垂直排列,从上到下。 垂直排列 */
}
.flex-container-column-reverse {
display: flex;
flex-direction: column-reverse; /* 从下到上垂直排列 弹性子项垂直排列,从下到上。*/
}
-
flex-grow
:它定义了一个元素在主轴(横轴)上的扩展比例。 这个比例是相对于剩余空间的。
-
flex-shrink
:当flex容器的宽度小于其子元素的总宽度时,flex-shrink属性将决定每个子元素的缩小比例。
-
justify-content
:
用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
如果一个容器的
justify-content
属性为center
,那么容器中的元素将会在横轴方向上居中对齐。如果容器的宽度为100px,而子元素的宽度为50px,那么子元素在容器中的位置将会在容器的中心点。另外,
justify-content
属性还可以接受以下值:
flex-start
:默认值,项目位于容器的开头。
flex-end
:项目位于容器的结尾。
center
:项目位于容器的中心。
space-between
:项目位于各行之间留有空白的容器内。
space-around
:项目位于各行之间均匀分布的容器内。
initial
:设置为默认值。
inherit
:从父元素继承该属性的值。
align-items
:
它用于设置或检索弹性盒子元素在交叉轴(纵轴)方向上的对齐方式。
如果一个容器的
align-items
属性为center
,那么容器中的元素将会在纵轴方向上居中对齐。如果容器的宽度为100px,而子元素的宽度为50px,那么子元素在容器中的位置将会在容器的中心点。
align-items
属性还可以接受以下值:
flex-start
:项目位于容器的上边缘。
flex-end
:项目位于容器的下边缘。
center
:项目位于容器的中心。
baseline
:项目位于容器的第一行基线对齐。
stretch
(默认值):如果项目未设置高度或设为auto
,将占满整个容器的高度。