flex 布局

时间：2017-06-02 19:39:08 阅读：253 评论：0 收藏：0 [点我收藏+]

标签：垂直 meta 起点 flex reverse 相等默认 har nbsp

<!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 布局

标签：垂直 meta 起点 flex reverse 相等默认 har nbsp

原文地址：http://www.cnblogs.com/jinsuo/p/6934759.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行