CSS—Flex布局

想面团的包包
80 阅读2分钟

1.概述

flex布局是弹性布局。它可以根据父容器的大小，来决定收缩还是扩展。

2.属性

1）flex-direction：设置主轴方向

  • row：水平方向从左——>右（默认）
  • columu：垂直方向从上——>下
  • row-reverse：水平方向从左<——右
  • column-reverse：垂直方向从上<——下

2）justify-content：设置主轴方向上元素的排列方式

  • flex-start：起始位置对齐（默认）
  • flex-end：末尾位置对齐
  • center：居中对齐
  • space-between：两边贴边，后等间距均匀分布
  • space-around：等边距均匀分布

3）align-items：设置侧轴方向上元素的排列方式（单行）

  • flex-start：起始位置对齐（默认）
  • flex-end：末尾位置对齐
  • center：居中对齐
  • strech:拉伸对齐
  • baseline：基线对齐（不常用）

4）align-content：设置侧轴方向上元素的排列方式（多行）

  • flex-start：起始位置对齐（默认）
  • flex-end：末尾位置对齐
  • center：居中对齐
  • strech:拉伸对齐
  • baseline：基线对齐（不常用）

5）flex-wrap：设置换行方式

  • wrap：换行
  • nowrap：不换行（默认）
  • wrap-reverse：反向换行，即换行且反转

6）flex-basis：指定 flex 元素在主轴方向上的初始大小

flex-basis属性下各属性值的优先级关系：max-width/min-width > flex-basis > width > box

7）flex-grow：定义子容器的瓜分剩余空间的比例，默认为 0

8）flex-shrink：指定 flex 元素的收缩规则，默认值是 1

当子容器宽度超过父容器宽度时，可使用flex-shrink属性定义各个flex元素的收缩比例。如果子容器没有超出父容器，设置 flex-shrink 是无效。

3.flex布局常见示例使用

//flex.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css"> 
</head>
<body>
    <!-- <div class="parent">
        <div class="son"></div>
    </div> -->

    <!-- <div class="flexBox">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div> -->

    <!-- <div class="box">
        <div class="box1">1</div>
        <div class="box1">2</div>
        <div class="box1">3</div>
    </div> -->

    <div class="index">
        <div class="search"></div>
        <div class="user"></div>
    </div>

</body>
</html>

（1）实现元素在整个盒子里居中对齐

image.png

//index.css
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.son {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
}

（2）实现元素等边距居中对齐

image.png

//index.css
.flexBox {
    display: flex;
    /* （默认）设置主轴为水平从左到右的方向 */
    flex-direction: row;
    /* 元素左右的间距相同，即等边距均匀分布 */
    justify-content: space-around;
    /* 设置侧轴方向上元素居中对齐 */
    align-items: center;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.item {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
}

（3）实现元素左右两边贴边，其他间距等分下的居中对齐

image.png

//index.css
.box {
    display: flex;
    /* 元素左右两边贴边，其他间距等分 */
    justify-content: space-between;
    align-items: center;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.box1 {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 1px solid #ccc;
}

（4）实现使输入框占满剩余空间

image.png

//index.vue
.index {
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    background-color: pink;
}

.search {
    /* 左边盒子固定宽高 */
    width: 26px;
    height: 26px;
    background-color: white;
    border: 1px solid #ccc;
}

.user {
    /* 右边盒子占满剩余空间 */
    flex: 1;
    width: 26px;
    height: 26px;
    background-color: #2eaae0;
}
avatar
文章
阅读
粉丝