flex布局中的骰子的布局

1.单项目布局

一个

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #body{
            background-color: black;
        }
        .cont{
            width: 210px;
            height: 210px;
            margin: 20px auto;
            background-color: #e7e7e7;
            border-radius: 10%;
            box-shadow:red;
            display: flex;
        }
        .cont span{
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: black;
            border-radius: 100%;
        }
    style>
head>
<body id="body">
    <div class="cont">
        <span>span>
    div>
body>
html>

运行结果
flex布局中的骰子的布局_第1张图片
换一个地方
flex布局中的骰子的布局_第2张图片
flex布局中的骰子的布局_第3张图片
然后
flex布局中的骰子的布局_第4张图片
flex布局中的骰子的布局_第5张图片
然后
在这里插入图片描述
flex布局中的骰子的布局_第6张图片
然后
在这里插入图片描述
flex布局中的骰子的布局_第7张图片
然后
在这里插入图片描述
flex布局中的骰子的布局_第8张图片
然后
flex布局中的骰子的布局_第9张图片
flex布局中的骰子的布局_第10张图片
然后
flex布局中的骰子的布局_第11张图片
flex布局中的骰子的布局_第12张图片

2.双项目布局

第一种

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛子的双项目title>
    <style>
        #body{
            background-color: black;
        }
        .cont{
            width: 210px;
            height: 210px;
            margin: 20px auto;
            background-color: #e7e7e7;
            border-radius: 10%;
            box-shadow: 10px 10px 30px pink;

            display: flex;
        }
        .cont span{
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: black;
            border-radius: 100%;
        }
    style>
head>
<body id="body">
    <div class="cont">
        <span>span>
        <span>span>
    div>
body>
html>

运行结果
flex布局中的骰子的布局_第13张图片
第二种

display: flex;
justify-content: space-between;

flex布局中的骰子的布局_第14张图片
第三种
在这里插入图片描述
flex布局中的骰子的布局_第15张图片
第四种
flex布局中的骰子的布局_第16张图片
flex布局中的骰子的布局_第17张图片
第五种
在这里插入图片描述
flex布局中的骰子的布局_第18张图片
第六种

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛子的双项目title>
    <style>
        #body{
            background-color: black;
        }
        .cont{
            width: 210px;
            height: 210px;
            margin: 20px auto;
            background-color: #e7e7e7;
            border-radius: 10%;
            box-shadow: 10px 10px 30px pink;

            display: flex;
        }
        .cont span{
            width: 50px;
            height: 50px;
            margin: 10px;
            background-color: black;
            border-radius: 100%;
        }
        .cont span:nth-child(2){
            align-self: center;
        }
    style>
head>
<body id="body">
    <div class="cont">
        <span>span>
        <span>span>
    div>
body>
html>

运行结果
flex布局中的骰子的布局_第19张图片

第七种
flex布局中的骰子的布局_第20张图片
flex布局中的骰子的布局_第21张图片

3.三项目的

第一种
flex布局中的骰子的布局_第22张图片
flex布局中的骰子的布局_第23张图片

4.四项目的

第一种
flex布局中的骰子的布局_第24张图片
flex布局中的骰子的布局_第25张图片
第二种

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hhhtitle>
    <style>
        body{
            background-color: black;
        }

        .box {
            margin: 20px auto;
            width: 210px;
            height: 210px;
            background-color: thistle;
            border-radius: 10%;
            box-shadow: 10px 10px  20px pink;

            display: flex;
            flex-wrap: wrap;
            align-content: space-between;

        }

        .column {
            flex-basis: 100%;
            display: flex;
            justify-content: space-between;
        }

        .box span{
            width: 50px;
            height: 50px;
            border-radius: 100%;
            margin: 10px;
            background-color: black;
        }
    style>
head>

<body>
    <div class="box">
        <div class="column">
            <span class="item">span>
            <span class="item">span>
        div>
        <div class="column">
            <span class="item">span>
            <span class="item">span>
        div>
    div>
body>

html>

flex布局中的骰子的布局_第26张图片

你可能感兴趣的:(前端,css,css3,html)