Css查漏补缺15.1-弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子（flex）介绍</title>
    <style>
        .flex_box{
            /* 50px;*/
            height: 300px;
            background-color: lightblue;
            display: flex;
        }
        .flex_box .item{
            width: 50px;
            height: 50px;
            border: 1px solid red;
            box-sizing: border-box;
            /*float: left;*/
        }
    </style>
</head>
<body>
<!--
弹性盒子可以做什么

多列布局，
功能强大
使用简单 display: flex;

前端兼容性的网站
can i use

浮动布局和flex做多列的区别
浮动会换行
flex默认不换行，默认是挤压子元素的宽度，挤压的最小的宽度就是子元素里面内容撑开的宽度
如果父元素的宽度小于子元素内容撑开的宽度和，那么子元素会溢出



-->
<div class="flex_box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
</div>

</body>
</html>
Css查漏补缺15.1-弹性盒子

相关推荐
