css flex布局

关于flex布局的一些简单用法

 

效果(下图)

实现代码:

复制代码
<!--html-->
<div class="wrap">
    <div class="content">这是子盒子</div>
</div>

//css
.wrap {
    display: flex;
    width: 300px;
    height: 300px;
    background-color: #ccc;
    justify-content: center;//子盒子位于现在的位置
    //justify-content: flex-start;子盒子位于现在的位置 的左边 
    //justify-content: flex-end;子盒子位于现在的位置 的右边  
}
.content {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
}
复制代码

效果(如下图)

复制代码
<!--html-->
<div class="wrap">
    <div class="content">这是子盒子</div>
</div>

//css
.wrap {
    display: flex;
    width: 300px;
    height: 300px;
    background-color: #ccc;
}
.content {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: orange;
    align-self: center;//位于上图中现在的位置
    //align-self: flex-start;位于上图中现在的位置  的上方
    //align-self: flex-end;位于上图中现在的位置  的下方
}    
复制代码
//用于父元素
justify-content: center | flex-start | flex-end;// 中  左   右  三个位置

//用于子元素
align-self: center | flex-start | flex-end;// 中  上   下  三个位置


//两个属性相互结合,就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap(换行-在下方)| nowrap(换行-在上方)| none (默认-不换行)

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*css*/
    .wrap{
        width:600px;
        height:300px;
        display:flex;
        background-color: #ccc;                     
    }
    .wrap div{
        width:25%;
        height: 150px;
        box-sizing: border-box;
        line-height: 150px;
        text-align: center;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>
复制代码

上面代码的效果图(默认不换行):

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
    /*css*/
    .wrap{
        width:600px;
        height:300px;
        display:flex;
        background-color: #ccc;
        flex-wrap: wrap;                      
    }
    .wrap div{
        width:25%;
        height: 150px;
        box-sizing: border-box;
        line-height: 150px;
        text-align: center;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
<div class="wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
</body>
</html>
复制代码

上面代码的效果图(换行-在下方)

以后有在了解的再补上

posted @   _zhiqiu  阅读(234)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
点击右上角即可分享
微信分享提示