Flex弹性盒子布局实现骰子6点

最新推荐文章于 2023-06-13 20:28:31 发布

彭世瑜

最新推荐文章于 2023-06-13 20:28:31 发布

阅读量4.7k

点赞数 4

分类专栏： html css

本文为博主原创文章，欢迎转载，请注明出处

本文链接：https://blog.csdn.net/mouday/article/details/101603437

版权

css 同时被 2 个专栏收录

39 篇文章 3 订阅

订阅专栏

html

10 篇文章 1 订阅

订阅专栏

概念

Flex 容器（flex container）
Flex 项目（flex item）
水平的主轴（main axis）垂直的交叉轴（cross axis）
主轴的开始位置（与边框的交叉点)main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

容器的属性	作用	可选参数	默认值
`flex-direction`	主轴的方向	`row\|row-reverse \| column \| column-reverse`	row
`flex-wrap`	换行	`nowrap \| wrap \| wrap-reverse`	nowrap
`flex-flow`	`<flex-direction> <flex-wrap>`		row nowrap
`justify-content`	主轴对齐方式	`flex-start \| flex-end \| center \| space-between \| space-around`	flex-start
`align-items`	交叉轴对齐	`flex-start \| flex-end \| center \| baseline \| stretch`	stretch
`align-content`	多根轴线的对齐方式	`flex-start \| flex-end \| center \| space-between \| space-around \| stretch`	stretch

项目的属性	作用	可选参数	默认值
order	排列顺序	`<integer>`	0
flex-grow	放大比例	`<number>`	0
flex-shrink	缩小比例	`<number>`	1
flex-basis	项目占据的主轴空间	`<length>`	auto
flex	`<flex-grow> <flex-shrink> <flex-basis>`		0 1 auto
align-self	项目对齐方式	`auto \| flex-start \| flex-end \| center \| baseline \| stretch`	auto

1、基础样式

h2{
    text-align: center;
}

.main{
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
}

.container{
    display: flex;
    width: 320px;
    height: 320px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
}

.box{
    width: 90px;
    height: 90px;
    background-color: #EEEEEE;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;            
}

.row{
    display: flex;
    flex-basis: 100%;
}

.item{
    width: 24px;
    height: 24px;
    background-color: #000000;
    margin: 3px;
    border-radius: 50%;
}
    

/*排列方向*/
.flex-direction-column{
     flex-direction: column;
}

/*水平排列*/
.justify-content-center{
    justify-content: center;
}

.justify-content-flex-end{
    justify-content: flex-end;
}

.justify-content-space-between{
    justify-content: space-between;
}
    
/*垂直排列*/
 .align-items-center{
     align-items: center;
 }

 .align-items-flex-end{
     align-items: flex-end;
 }

 .align-items-space-between{
     align-items: space-between;
 }

/*多轴对齐*/
 .align-content-space-between{
    align-content: space-between;
 }

 /*项目排列*/
 .align-self-center{
    align-self: center;
 }

 .align-self-flex-end{
    align-self: flex-end;
 }

2、单项目

在这里插入图片描述
代码如下

<div class="container">

    <div class="box">
        <span class="item"></span>
    </div>

    <div class="box justify-content-center">
        <span class="item"></span>          
    </div>

    <div class="box justify-content-flex-end">
        <span class="item"></span>
    </div>

    <div class="box align-items-center">
        <span class="item"></span>
    </div>

    <div class="box justify-content-center align-items-center">
        <span class="item"></span>
    </div>

    <div class="box justify-content-flex-end align-items-center">
        <span class="item"></span>
    </div>

    <div class="box align-items-flex-end">
        <span class="item"></span>
    </div>
    
    <div class="box justify-content-center align-items-flex-end">
        <span class="item"></span>
    </div>

     <div class="box justify-content-flex-end align-items-flex-end">
        <span class="item"></span>
    </div>     
</div>

3、双项目

在这里插入图片描述

<div class="container">
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box">
        <span class="item"></span>
        <span class="item align-self-center"></span>
    </div>
    
    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item align-self-flex-end"></span>
    </div>

    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box justify-content-space-between align-items-center">
        <span class="item"></span>
        <span class="item"></span>
    </div>  
    <div class="box justify-content-space-between align-items-flex-end">
        <span class="item"></span>
        <span class="item"></span>
    </div>  

    <div class="box justify-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box justify-content-space-between align-items-center flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
    </div>  

    <div class="box justify-content-space-between align-items-flex-end flex-direction-column">
        <span class="item"></span> 
        <span class="item"></span>
    </div> 
    
</div>

4、多项目

在这里插入图片描述

<div class="container">
    <div class="box">
        <span class="item"></span>
        <span class="item align-self-center"></span>
        <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box justify-content-flex-end align-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
    <div class="box align-content-space-between">
       <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box align-content-space-between">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box align-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>

    <div class="box">
       <div class="row">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
        </div>

        <div class="row justify-content-center">
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

     <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    
</div>

5、骰子6点

在这里插入图片描述

<div class="container">
    <div class="box justify-content-center align-items-center">
        <span class="item"></span>
    </div>
    
    <div class="box justify-content-space-between">
        <span class="item"></span>
        <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box">
            <span class="item"></span>
            <span class="item align-self-center"></span>
            <span class="item align-self-flex-end"></span>
    </div>
    
    <div class="box align-content-space-between">
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box">
        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
        
        <div class="row justify-content-center">
            <span class="item"></span>
        </div>

        <div class="row justify-content-space-between">
            <span class="item"></span>
            <span class="item"></span>
        </div>
    </div>

    <div class="box align-content-space-between flex-direction-column">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
</div>

完成代码：
https://github.com/mouday/LearningNote/blob/master/html/flex-demo.html

其他

防止挤压

flex-shrink: 0

参考

Flex 布局教程：语法篇
Flex 布局教程：实例篇
30分钟彻底弄懂flex布局
CSS3 弹性盒子(Flex Box)

彭世瑜

关注

4
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
Flex弹性盒子布局实现骰子6点

1、基础样式h2{ text-align: center;}.main{ display: flex; flex-wrap: wrap; width: 680px; justify-content: space-between;}.container{ display: flex; width: 320px; heigh...
复制链接

扫一扫