CSS布局之flexbox
参考链接：
https://www.cnblogs.com/qingchunshiguang/p/8011103.html
练习代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.container{
background-color: orange;
width:300px;
height:300px;
display:flex;
justify-content:space-between;
align-items: center;
}
.div1{
background-color: red;
width:100px;
height:100px;
}
.div2{
background-color: blue;
width:100px;
height:100px;
}
.div3{
background-color: green;
width:100px;
height:100px;
} </style>
</head>
<body>
<div class="container">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
</div> </body>
</html>
CSS布局之flexbox的更多相关文章
- 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定
传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...
- CSS布局（下）
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- 一览css布局标准
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...
- 响应式布局：Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
- css布局详解（二）——标准流布局（Nomal flow）
css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
随机推荐
- Unity中的动画系统和Timeline(3) 混合树和动画匹配
混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...
- 1.MySQL的基本使用
数据库的操作: 1.Windows中如何使用CMD进入MySQL数据库: 1 Windows+R --> 输入 cmd 运行 2 C:\Users\***>D: ...
- Django 调用支付宝接口
目录 一 支付宝接口 二 视图函数 支付宝支付 正式环境:用营业执照,申请商户号,appid 测试环境:沙箱环境:https://openhome.alipay.com/platform/appD ...
- PostgreSQL创建只读账户
目前PostgreSQL并不能像MySQL一样直接对某个数据库赋予只读权限,现实中有研发需要新建一个用户然后赋予对某个数据库只读权限. 举例说明如何创建 用edbstore用户连接edbstore数据 ...
- luogu P4383 [九省联考2018]林克卡特树lct
传送门 题目操作有点奇怪,不过可以发现这就是把树先变成\(k+1\)个连通块,然后每个连通块选一条路径(本题中一个点也是一条路径),然后依次接起来.所以实际上要求的是选出\(k+1\)条点不相交的路径 ...
- node端口被占用
Error: listen EADDRINUSE :::8000 at Object._errnoException (util.js:992:11) at _exceptionWithHostPor ...
- 查看CPU位数的方法
查看电脑cpu的位数 WINDOWS下查看的 方法: 方法一. 在开始→运行 ...
- Java中遍历Set集合的方法
对 set 的遍历 1.迭代遍历: Set<String> set = new HashSet<String>(); Iterator<String> it = s ...
- SpringBoot测试类启动错误 java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(classes=...) with your test
报错 java.lang.IllegalStateException: Unable to find a @SpringBootConfiguration, you need to use @Cont ...
- Linux操作系统笔记
#include <stdio.h> #include <stdlib.h> #include <unistd.h> //linux下面的头文件 #include ...