Flex布局(弹性布局)是CSS3中引入的一种布局模式,它通过display: flex;
设置在容器上,然后利用一系列的属性来控制子元素的排列和对齐方式。以下是常用的Flex布局属性:
-
display
display: flex;
:将容器指定为弹性容器。
-
flex-direction
flex-direction: row;
:水平主轴,子元素水平排列(默认值)。flex-direction: row-reverse;
:水平反向主轴,子元素水平反向排列。flex-direction: column;
:垂直主轴,子元素垂直排列。flex-direction: column-reverse;
:垂直反向主轴,子元素垂直反向排列。
-
flex-wrap
flex-wrap: nowrap;
:默认值,子元素不换行,尽可能在一行显示。flex-wrap: wrap;
:子元素自动换行,超出容器宽度会进行换行显示。flex-wrap: wrap-reverse;
:子元素反向换行。
-
justify-content
justify-content: flex-start;
:默认值,子元素靠容器的起始位置对齐。justify-content: flex-end;
:子元素靠容器的结束位置对齐。justify-content: center;
:子元素在容器中居中对齐。justify-content: space-between;
:子元素平均分布在容器内,两端不留空白。justify-content: space-around;
:子元素平均分布在容器内,两端留有相等的空白。
-
align-items
align-items: stretch;
:默认值,子元素拉伸以填充容器高度。align-items: flex-start;
:子元素靠容器的顶部对齐。align-items: flex-end;
:子元素靠容器的底部对齐。align-items: center;
:子元素在容器中垂直居中对齐。align-items: baseline;
:子元素基线对齐。
-
align-content
align-content: stretch;
:默认值,容器内的行拉伸以填充容器高度。align-content: flex-start;
:所有行在容器的顶部对齐。align-content: flex-end;
:所有行在容器的底部对齐。align-content: center;
:所有行在容器中垂直居中对齐。align-content: space-between;
:所有行平均分布在容器内,两端不留空白。align-content: space-around;
:所有行平均分布在容器内,两端留有相等的空白。
-
flex
flex: flex-grow flex-shrink flex-basis;
:设置子元素的缩放比例、收缩能力和基准值。flex-grow
:指定子元素的放大比例。flex-shrink
:指定子元素的收缩比例。flex-basis
:指定子元素的基准值。
这些是Flex布局中常用的属性,通过组合使用它们,可以实现各种不同的弹性布局效果。
标签:容器,常用,Flex,align,元素,content,flex,对齐,属性 From: https://www.cnblogs.com/Linzj5950/p/17896484.html