常见Flex控件用法剖析(Flex控件常用技巧详解)

原创

ithorizon 4周前 (10-19) 阅读数 20 #后端开发

一、Flex布局简介

Flex布局是一种CSS3中非常强势的布局对策，它可以让容器能够改变其子项的宽度、高度（甚至顺序）以最佳对策填充可用空间。Flex布局非常适合响应式设计，能够兼容各种屏幕尺寸和分辨率。下面我们来详细剖析Flex控件的常用技巧。

二、Flex容器的基本用法

在使用Flex布局时，首先需要将一个元素设置为Flex容器。这可以通过将display属性设置为flex或inline-flex来实现。


.container {
    display: flex;
}

2.1 设置Flex方向

Flex容器的主轴方向默认为水平方向，可以通过flex-direction属性来设置。


.container {
    display: flex;
    flex-direction: row; /* 默认值，水平方向 */
    flex-direction: column; /* 垂直方向 */
}

2.2 设置Flex-wrap

当容器内的子项宽度总和超过容器宽度时，默认情况下子项会溢出容器。可以通过flex-wrap属性来控制子项是否换行。


.container {
    display: flex;
    flex-wrap: nowrap; /* 默认值，不换行 */
    flex-wrap: wrap; /* 换行 */
}

2.3 设置Flex流对齐

Flex容器提供了多种对齐对策，可以通过justify-content属性来设置。

.container {

display: flex;

justify-content: flex-start; /* 默认值，起点对齐 */

justify-content: flex-end; /* 终点对齐 */

justify-content: center; /* 居中对齐 */

justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */

justify-content: space-around; /* 每个项目两侧的间隔相等 */

}

二、Flex子项的基本用法

Flex子项是Flex容器内的子元素，下面我们来介绍子项的常用属性。

3.1 设置Flex-grow

Flex-grow属性定义了子项的放大比例，默认为0，即如果有剩余空间，也不放大。


.item {
    flex-grow: 1; /* 放大比例 */
}

3.2 设置Flex-shrink

Flex-shrink属性定义了子项的缩小比例，默认为1，即空间不足时，子项将等比例缩小。


.item {
    flex-shrink: 0; /* 不缩小 */
}

3.3 设置Flex-basis

Flex-basis属性定义了子项的基础大小，默认值为auto，即子项的本来大小。


.item {
    flex-basis: 100px; /* 基础大小 */
}

3.4 设置Flex属性

Flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。


.item {
    flex: 2 1 100px; /* flex-grow, flex-shrink, flex-basis */
}

三、Flex布局实例

下面我们通过几个实例来展示Flex布局的强势功能。

3.1 布局圣杯布局

圣杯布局是一种常见的页面布局对策，其中包含一个头部、一个尾部和三个主体内容区域。


.container {
    display: flex;
    flex-direction: column;
}
.header, .footer {
    height: 50px;
    background-color: #333;
}
.main {
    flex: 1;
    display: flex;
}
.main .left, .main .right {
    width: 200px;
    background-color: #ddd;
}
.main .center {
    flex: 1;
    background-color: #f0f0f0;
}

3.2 布局瀑布流

瀑布流是一种图片展示对策，图片会依宽度自动排列，形成类似瀑布的效果。


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.item {
    width: calc(33.33% - 10px);
    margin: 5px;
    background-color: #ddd;
}