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

更新时间：2022-06-16 06:35:50

概念

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、单项目

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

代码如下

<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、双项目

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

<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、多项目

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

<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点

Flex弹性盒子布局实现骰子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

参考

上一篇 : ：js获取13位时间戳下一篇 : 简单理解float浮动

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

1、基础样式

2、单项目

3、双项目

4、多项目

5、骰子6点

其他

相关阅读

推荐文章