首页 > 代码库 > flex 布局

flex 布局

2024-09-29 17:30:38   217人阅读

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            height: 100vh;
    
            display: flex;

            flex-wrap: wrap; /* nowrap | wrap | wrap-reverse;*/



        /*    flex-direction:column; 主轴 垂直 排列 起点上沿*/
            /*flex-direction:column-reverse   垂直排列  起点下沿;*/
            /*flex-direction: row  水平排列 起点左端;*/
            /*flex-direction: row-reverse   水平排列  起点右端;*/


            /*flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/






            /*justify-content:flex-start; x轴左对齐*/ 
            /* justify-content:space-between; 两端对齐，项目间距相等*/
            /*justify-content:flex-end; x轴右对齐*/
            /*justify-content:center; x轴中间对齐*/
            /*justify-content:space-around 项目两侧的间隔相等; */

            /*align-items:flex-end; y轴   底部对齐*/
            /*align-items:flex-start; y轴 顶部对齐*/
            /*align-items: center; 中间对齐*/
            /*align-items:baseline baseline: 项目的第一行文字的基线对齐。*/        
            /*align-items:stretch;    占满整个容器的高度*/
            /*align-content: center;*/



        }
        .item{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="box">
    <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>

        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>
        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>

        <span class="item">内容</span>
    <span class="item">内容</span>
    <span class="item">内容</span>

</div>
    
</body>
</html>

 

flex 布局


联系
我们