flex布局

作者: 诚实可靠小郎俊 | 来源:发表于2020-09-16 14:35 被阅读0次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

display: flex和display: inline-flex的区别

flex：块级

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: flex;
    }
</style>
<body>
    <div class="box"></div>
    <span>span</span>
</body>
</html>

如图

display: flex.png

inline-flex：行级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display: flex</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-flex;
    }
</style>
<body>
    <div class="box"></div>
    <span>span</span>
</body>
</html>

如图

display: inline-flex.png

flex container的属性justify-content、align-items

justify-content：决定flex items在主轴方向对齐方式
flex-start: (默认值)主轴开始
flex-end: 主轴结束
center: 主轴居中
space-between: flex items之前距离相等主轴开始、主轴结束两端对齐
space-evenly: flex items与主轴开始、主轴结束之前的距离等于flex items之间的距离
space-around: flex items与主轴开始、主轴结束之间的距离是flex items之间距离的一半

flex-start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局justify-content</title>
</head>
<style>
    .box {
        width: 500px;
        height: 400px;
        background-color: red;
        margin: 0 auto;
        display: flex;
        justify-content:flex-start;
    }
    .item {
        width: 100px;
        height: 100px;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
    }
    .item1 {
        background-color: rosybrown;
    }
    .item2 {
        background-color: rebeccapurple
    }
    .item3 {
        background-color: royalblue;
    }
</style>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>
</body>
</html>