CSS3 弹性盒布局

最新推荐文章于 2024-09-16 23:39:36 发布

xklsky

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量335

点赞数

分类专栏： css 文章标签： css3 布局

本文链接：https://blog.csdn.net/xklsky/article/details/50771738

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>CSS3 弹性盒布局</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        .flex-container {
            list-style: none;

            display: -webkit-flex;
            display: -moz-flex;
            display: -o-flex;
            display: -ms-flex;
            display: flex;
            /*
            flex-direction：row | row-reverse | column | column-reverse
            row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
            row-reverse：对齐方式与row相反。
            column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
            column-reverse：对齐方式与column相反。
            */
            flex-direction: row;
            /*
            flex-wrap：nowrap | wrap | wrap-reverse
            nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
            wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
            wrap-reverse：反转 wrap 排列。
            */
            flex-wrap: wrap;
            /*
            flex-flow：<' flex-direction '> || <' flex-wrap '>
            取值：
                <' flex-direction '>：
                定义弹性盒子元素的排列方向。
                <' flex-wrap '>：
                控制flex容器是单行或者多行。
            说明：
                复合属性。设置或检索弹性盒模型对象的子元素排列方式。
            */
        }

        .flex-item {
            padding: 5px;
        }
        .flex-item:nth-child(1){order: -1;}
        .flex-item:nth-child(2){order: -2;}
    </style>
</head>
<body>
<ul class="flex-container">
    <li class="flex-item">1<img src="http://placehold.it/300&text=10"></li>
    <li class="flex-item">2<img src="http://placehold.it/300&text=20"></li>
    <li class="flex-item">3<img src="http://placehold.it/300&text=30"></li>
    <li class="flex-item">4<img src="http://placehold.it/300&text=40"></li>
    <li class="flex-item">5<img src="http://placehold.it/300&text=50"></li>
    <li class="flex-item">6<img src="http://placehold.it/300&text=60"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

</script>
</body>
</html>