Flex布局

最新推荐文章于 2022-11-26 20:18:18 发布

小仓桑

最新推荐文章于 2022-11-26 20:18:18 发布

阅读量212

点赞数

分类专栏： HTML 文章标签： css

原文链接：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

版权

HTML 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

根据阮一峰老师教程制作的笔记

单项目

首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。

.Box{
        display: flex;
    }

设置项目的对齐方式，就能实现居中对齐和右对齐。

.Box{
        display: flex;
        /*左右居中*/
        justify-content: center;
    }

.Box{
        display: flex;
        /*向右靠*/
        justify-content: flex-end;
    }

设置交叉轴对齐方式，可以垂直移动主轴。

.Box{
        display: flex;
        /*上下居中*/
        align-items: center;
    }

.Box{
        display: flex;
        /*上下居中*/
        align-items: center;
        /*左右居中*/
        justify-content: center;
    }

.Box{
        display: flex;
        /*靠下显示*/
        align-items: flex-end;
        /*左右居中*/
        justify-content: center;
    }

.Box{
        display: flex;
        /*靠下显示*/
        align-items: flex-end;
        /*靠右显示*/
        justify-content: flex-end;
    }

双项目

.Box{
        display: flex;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }

flex-direction为改变主轴的方向

.Box{
        display: flex;
        /*设置位置为纵向*/
        flex-direction: column;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }

.Box{
        display: flex;
        /*垂直居中显示*/
        align-items: center;
        /*设置位置为纵向*/
        flex-direction: column;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }

.Box{
        display: flex;
        /*垂直居中显示*/
        align-items: flex-end;
        /*设置位置为纵向*/
        flex-direction: column;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }

.Box{
        display: flex;
    }
    .circular:nth-child(2){
        align-self: center;
    }

.Box{
        display: flex;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }
    .circular:nth-child(2){
        /*居中对齐*/
        align-self: flex-end;
    }

三项目

.Box{
        display: flex;
        /*两个div向大的div中两边布局*/
        justify-content: space-between;
    }
    .circular:nth-child(2){
        /*居中对齐*/
        align-self: center;
    }
    .circular:nth-child(3){
        align-self: flex-end;
    }

四项目

.Box{
        display: flex;
        /*两个div向大的div中两边布局*/
        justify-content: flex-end;
        align-content: space-between;
        flex-wrap: wrap;
    }

.Box{
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
    }
/*一个column包裹两个div*/
    .column{
        flex-basis: 100%;
        display: flex;
        justify-content: space-between;
    }

六项目

.Box{
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
    }

九项目

.Box{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

HTML样式

<body>
    <div class="Outer_Box">
        <div class="Box">
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
            <div class="circular"></div>
        </div>
    </div>
</body>

CSS样式

.Outer_Box{
        height: 500px;
        width: 500px;
        background: black;
        margin: 0 auto;
        display: flex;
        /*左右居中*/
        justify-content: center;
        /*垂直居中*/
        align-items: center;
    }
    .Box{
        display: flex;
        background: #ffffff;
        height: 150px;
        width: 150px;
        border-radius: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .circular{
        width: 30px;
        height: 30px;
        background: red;
        border-radius: 50%;
        margin: 5px;
    }

小仓桑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex布局

根据阮一峰老师教程制作的笔记HTML元素<div class="Outer_Box"> <div class="Box"> <div class="circular"></div> </div></div>单项目：首先，只有左上角1个点的情况。Flex布局默认就是首行左对齐，所以一行代码就够了。...
复制链接

扫一扫