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,可以把我给的 ...
随机推荐
- spring5的基本组成（6个模块）
1:数据访问及集成(Data Access/Integeration):jdbc,orm,oxm,jms,transactions ——由 spring-jdbc.spring-tx.spring-o ...
- 配置tomcat-users.xml文件
今天在学习登录日志保存时出现一系列错误,想查看浏览器后台的session,结果忘记怎么看用户名和密码了,下面是转载自民工也Coding的一篇文章, 文章链接为:http://www.cnblogs.c ...
- python 列表的（总结）
列表(自我总结) 1.在python中什么是列表 列:排列,表:一排数据 在python中的表达就是 l = [1,2,3,4,5,6,7] 2.列表是可变类型还是不可变类型 也就是说列表能不能被ha ...
- springboot - 应用实践（N）使用springboot内置的@Scheduled
1.springboot开箱即用,内置调度任务的使用. 建一个简单的springboot工程,pom.xml: <?xml version="1.0" encoding=&q ...
- BZOJ 1303 中位数图 题解
题面 因为所求的是中位数,所以考虑改变原序列.把大于 b 的数全部变为 1,小于 b 的数变为 −1,等于 b 则为 0.问题就变为求存在几个包含 b的区间和为 0 . 根据乘法原理,我们枚举每一个l ...
- 读取CSV文件存入map中（C++）
自己平时操作文件用的不多,今天小伙伴让帮忙写一下这个,顺便记一下.实现功能:从"翻译.csv"文件中读取出字符串,以","作为分隔符,将每一行对应存入map中. ...
- html中的锚点设置
html中的锚点 一.页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接去找喵星人:(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点<a na ...
- python_操作MySQL 初解
单文件操作数据库 import random import threading, multiprocessing import time, datetime import pymysql import ...
- Fliter设置字符编码，解决中文问题
class EncodingFilter implements FileFilter{ private String encoding; @Override public boolean accept ...
- vue单页应用首次加载太慢之性能优化
问题描述: 最近开发了一个单页应用,上线后发现页面初始加载要20s才能完成,这就很影响用户体验了,于是分析原因,发现页面加载时有个 vendor.js达到了3000多kb,于是在网上查找了一下原因,是 ...