flex实现四个元素分布在盒子的四个角

首先看一下效果

HTML

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

CSS

.wrapper {border: 1px solid salmon;background-color: salmon;width: 300px;height: 300px;margin: 0 auto;display: flex;justify-content: space-between;
}.wrapper .box {display: flex;flex-direction: column;justify-content: space-between;
}.wrapper .item {width: 100px;height: 100px;background-color: aquamarine;
}

flex实现四个元素分布在盒子的四个角相关推荐

CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
2020.8.26广联达笔试第二题——魔法师四种元素平衡（Python）
Python编程实现,魔法师的四种元素平衡. 题目简述:魔法师有四种属性,当四种属性的值相同时最好.在修炼时,魔法师可以通过将任意两种属性转化为任意一种其他属性,来进行平衡性调整.试问魔法师当前的四种 ...
【Flink】Flink中流动的四种元素
1.概述转载:Flink中流动的四种元素在Flink DataStream中流动着不同的元素,统称为StreamElement,StreamElement可以是StreamRecord.Water ...
JavaScript学习（十四）—元素节点关系和特殊节点
JavaScript学习(十四)-元素节点关系和特殊节点一.元素节点 (1).parentElement: 获取某元素的父元素,它和parentNode的区别是parentElement获取到的值时 ...
flex实现最后一个元素居右
使用flex实现最后一个元素居右的步骤: 父级元素使用flex布局子级元素使用margin-left: auto;实现元素居右显示代码示例: 让class属性值为two的元素居右显示 < ...
火水风四种元素平衡 ABCD四个相等
<XX魔法书>中记载,只有魔法师体内地火水风四种元素平衡的时候才是绝对安全的.某魔法师在给自己做了一个体检, 发现自己体内的四种元素数量分别是A,B,C,D,魔法师慌了,这时他看到魔法书中 ...
利用flex布局在父元素和子元素宽高不明的情况下设置某一子元素剩余父元素的宽高
如题,本人经常设置宽高都是这种,先通过js获取父元素的宽高,别的子元素的宽高.再通过js赋值 this.height = this.$refs.xxx.offsetHeight - this.$ref ...
flex 子元素占满剩余高度与 flex:1 的子元素 overflow:hidden 失效
这几天使用flex开发大屏,遇到一个印象比较深的问题就是flex的子元素,在其他兄弟元素的高度不定的情况下,如何占满父元素的剩余空间? 效果图: 要点就是: 1.父元素要设置 display: fle ...
25.有5个人做在一起, 问第五个人多少岁? 他说比第四个人大2岁. 问第四个人岁数, 他说比第是三个人大2岁. 问第三个人, 又说比第二人大两岁. 问第二个人, 说比第一个人大两岁. 最后问第一个人
程序书算法精题–JS版有5个人做在一起, 问第五个人多少岁? 他说比第四个人大2岁. 问第四个人岁数, 他说比第是三个人大2岁. 问第三个人, 又说比第二人大两岁. 问第二个人, 说比第一个人大两岁 ...
【灯哥开源四足机器人】推荐一个开源四足机器狗项目，8自有度，两个舵机控制一个腿，apache开源协议的，已经迭代了好多个版本了，设计的非常好。有官方淘宝店，没有3D打印机的可以购买散装零件自己组装
目录前言 1,关于[灯哥开源四足机器人] 2,使用py-apple 3,总结前言本文的原文连接是: https://blog.csdn.net/freewebsys/article/detail ...

flex实现四个元素分布在盒子的四个角

flex实现四个元素分布在盒子的四个角相关推荐

最新文章

热门文章