theluyuan/webveuje

Fork 0

asd 9bf8e8d020 好久没更新了

2021-03-23 10:58:10 +08:00

4.3 KiB

Raw Blame History

flex

flex 意为弹性盒子，用来为盒模型提供最大的灵活性

flex 使用

任何一个元素都能被指定为flex 容器

display:flex  选中元素为块级元素时

display:inline-flex    选中元素为内联元素时

基本概念

通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“

容器默认存在两个轴，水平主轴和垂直的交叉轴

水平主轴的起点叫做 main start 结束位置叫做 main end

垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end

注：容器的主轴和侧轴是由 flex-direction 确定的默认主轴是水平（row）

当 flex-direction 的值为column时主轴为竖直侧轴为水平

容器的属性

flex-direction 声明容器使用的轴是水平的还是垂直的
- row 水平（起点在左）
- column 垂直（起点在上）
- row-reverse 水平（起点在右）
- column-reverse 垂直（起点在下）
justify-content 声明排列的方式
- center 居中
- space-around 每个项目两侧的间隔相等项目到边框有间距
- space-between 两端对齐项目之间的间隔都相等
align-items 定义项目在交叉轴上的排列方式
- center 居中
- flex-start 交叉轴起点对齐（拓展）
- flex-end 交叉轴终点对齐
- baseline 第一行文字的基线对齐
- stretch 默认占满整个容器的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;  //声明容器为弹性盒子 
            flex-direction: row; //声明排列的方向为水平和竖直
            align-items: center;//垂直排列方式
            justify-content: center； //水平排列方式
        }
        .left{
            width: 200px;
            height: 200px;
            background: red;
        }
        .right{
            width: 200px;
            height: 200px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

justify-content

center: 水平居中

.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: center;
        }

space-around 每个项目两侧的间隔相等项目到边框有间距

.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: space-around;
        }

space-between 两端对齐项目之间的间隔都相等

.box{
            width: 1000px;
            height: 500px;
            background: pink;
            display:flex;
            flex-direction: row;
            justify-content: space-between;
        }

align-items

定义侧轴的项目对齐方式

作业1：

作业2：

实现flex-内容宽度等分

作业3：

左右布局，一侧定宽一侧自适应填满

作业4：

未知高度上下左右居中

作业6：

作业7：

作业8

4.3 KiB Raw Blame History Unescape Escape