Flex布局实战-优快云博客

本文链接：https://blog.youkuaiyun.com/bbsyi/article/details/71190090

本文通过具体的实例介绍了如何使用Flex布局来实现不同数量的项目对齐，包括单项目、双项目及多项目的水平和垂直对齐方式，并展示了如何利用Flex布局创建骰子样式的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    /*兼容写法*/
    /*display:-webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;*/
    *{
        margin: 0;
        padding: 0;
    }
</style>
<body>
<style type="text/css">
    /*单项目*/
    .box{
        width: 100%;
        height: 80px;
        border: 1px solid #000;
        display: flex;/*必须属性*/
        justify-content: space-between;/*设置项目的对齐方式，就能实水平方式对齐。*/
        align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/
    }
    .item{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: red;
    }
    /*双项目*/
    .box1{
        width: 100%;
        height: 120px;
        border: 1px solid #000;
        display: flex;/*必须属性*/
        justify-content: center;/*设置项目的对齐方式，就能实水平方式对齐。*/
        align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/
        flex-direction: column;
    }
    .item1{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: red;
    }
    .item1:nth-child(2) {
        align-self: flex-end;/*某个弹性对象的对齐方式*/
    }
    .box2 {
        width: 100%;
        height: 120px;
        border: 1px solid #000;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        /*flex-wrap: wrap;*/ /*超出是否换行*/
    }
    .column2 {
        flex-basis: 100%;/*初始化宽度*/
        display: flex;
        justify-content: space-between;
    }
    .item2{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: red;
    }
</style>
<!-- --------------------骰子的布局----------------- -->
<!-- 单项目 -->
<div class="box">
    <span class="item"></span>
</div>
<!-- 双项目 -->
<div class="box1">
    <span class="item1"></span>
    <span class="item1"></span>
</div>
<!-- 四项目 -->
<div class="box2">
    <div class="column2">
        <span class="item2"></span>
        <span class="item2"></span>
    </div>
    <div class="column2">
        <span class="item2"></span>
        <span class="item2"></span>
    </div>
</div>

<!-- ----------------------网格布局------------------- -->

<style type="text/css">
    body{
        /*overflow: hidden;*/
    }
    .Grid{
        display: flex;
        justify-content:center;
    }
    .Grid-cell{
        border: 1px solid red;
        height: 80px;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        /*flex 属性是 flex-grow:元素的宽度为其他元素的多少倍宽、flex-shrink：元素收缩到其他元素的多少分之几 和 flex-basis：初始化宽度， 属性的简写属性,让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容*/
    }
    .Grid-cell.u-full {
        flex: 0 0 100%;
    }

    .Grid-cell.u-1of2 {
        flex: 0 0 50%;
    }

    .Grid-cell.u-1of3 {
        flex: 0 0 33.3333%;
    }

    .Grid-cell.u-1of4 {
        flex: 0 0 25%;
    }
    .item{
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background-color: red;

    }
</style>
<div class="Grid">
    <div class="Grid-cell u-1of4">
        <span class="item"></span>
    </div>
    <div class="Grid-cell">...</div>
    <div class="Grid-cell">...</div>
</div>
</body>
</html>

flexbox弹性布局