flex 布局方法

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

 

1.flex-direction:决定主轴的方向

row(默认值):主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿

 

2.flex-warp 如果一条轴线排列不下，如何换行

flex-wrap:nowrap 不换行
flex-wrap:wrap 换行，第一行在上方
flex-wrap:wrap-reverse 换行，第一行在下方

 

2.justify-content:定义项目在主轴上面的对齐方式

justify-content
flex-start（默认值）左对齐
flex-end：右对齐
center:居中
space-between:两端对齐，项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以项目之间的间隔比项目与周边的间隔大一倍
space-evently:项目与项目之间，项目与边框之间的间隔都相等

 

 

3.align-items定义项目在交叉轴上如何对齐

align-items:
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐(用的多)
baseline:项目的第一行文字的基线对齐
stretch（默认值）如果项目未设置高度或设为auto,将占满整个容器的高度

 

 

 

4.align-content 属性定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两端的间隔相等，所以轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值) 轴线占满整个交叉轴

 

 

5.项目属性

以下6个属性设置在项目上。

order
flex-grow
flex-shrink
flex-basis
flex
align-self

 

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
  flex-grow: <number>; /* default 0 */
}

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
  flex-shrink: <number>; /* default 1 */
}
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
  flex-basis: <length> | auto; /* default auto */
}

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}


align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

 

flex:1 使所有项目平均占满空间

 

 

案例：

1.实现垂直居中

    <style>
        .box {
            width: 800px;
            height: 400px;
            border:1px  solid red;
            margin: auto;
            display: flex;
            justify-content: center; /*实现垂直居中*/
            align-items: center; /*实现垂直居中*/
        }
        .box > div {
            width: 100px;
            height: 100px;
            background: aqua;
            border: 1px solid pink;
        }
    </style>
<div class="box">
    <div></div>
</div>

 

 实现圣杯布局：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局 Flex 实现</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh; /* 高度为视口高度 */
        }

        .left,
        .right {
            width: 200px;
            background-color: #f2f2f2;
            padding: 20px;
            box-sizing: border-box;
        }

        .center {
            flex: 1; /* 自适应空间 */
            background-color: #e6f7ff;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="left">左侧栏</div>
    <div class="center">中间内容（自适应）</div>
    <div class="right">右侧栏</div>
</div>

</body>
</html>

 

posted on 2025-06-15 17:39  星河赵  阅读(18)  评论(0)    收藏  举报

导航