css3flex属性

CSS3中引入了flex属性，可以方便地对伸缩容器中的子元素进行布局。使用flex布局时，需要将要布局的容器的display属性设置为flex。

.container {
    display: flex;
}

flex属性有很多可选值，可以控制子元素在容器中的位置、大小和空间分配。

1. justify-content

该属性控制子元素在容器中水平方向的分布和对齐方式。比如，可以使用justify-content: center将子元素居中显示。

.container {
    display: flex;
    justify-content: center;
}

2. align-items

该属性控制子元素在容器中垂直方向的分布和对齐方式。比如，可以使用align-items: center将子元素垂直居中显示。

.container {
    display: flex;
    align-items: center;
}

3. flex-direction

该属性控制子元素在容器中排列的方向。可以设置为row（从左到右）、row-reverse（从右到左）、column（从上到下）和column-reverse（从下到上）。

.container {
    display: flex;
    flex-direction: column;
}

4. flex-wrap

该属性控制子元素是否换行。可以设置为nowrap（不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

.container {
    display: flex;
    flex-wrap: wrap;
}

5. flex-flow

该属性是flex-direction和flex-wrap的简写方式。比如，可以使用flex-flow: row wrap来同时设置子元素的排列方向和是否换行。

.container {
    display: flex;
    flex-flow: row wrap;
}

6. align-content

该属性控制容器内子元素的垂直方向上的空间分配，仅在有多行的情况下生效。可以设置为flex-start（朝上对齐）、center（居中对齐）、flex-end（朝下对齐）等。

.container {
    display: flex;
    align-content: center;
}

7. flex

该属性是flex-grow、flex-shrink和flex-basis的缩写。flex-grow指定子元素的放大比例，默认为0；flex-shrink指定子元素的缩小比例，默认为1；flex-basis指定子元素在分配多余空间前的基准大小，默认为auto。

.item {
    flex: 1 1 100px;
}
    

上述代码设置子元素可以等分容器的多余空间，且基准大小为100px。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！