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,可以把我给的 ...
随机推荐
- 【VS开发】【智能语音处理】解读男女声音的区别：亮度，糙度
1. 男女声音的本质不同:音高不同 这是废话,地球人都知道.都说女声比男声高八度,其实不能,高4-6度差不多. 2. 男女声音的不同:亮度 从直观上这个很好理解,女声普遍更"亮", ...
- vue父子组件相互传值的实例
当子组件需要向父组件传递数据时,就要用到自定义事件 子组件用 $emit()来触发事件,父组件用$on()来监昕子组件的事件 父组件也可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自 ...
- Java实验报告四
一.实验目的 (1)掌握类的继承方法: (2)变量的继承和覆盖,方法的继承.重载和覆盖实现: 二.实验内容 1)实验代码 import java.util.Scanner; public class ...
- Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 问题的简单解决
Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 1. 简单处理 sqlplus / as sysdba startup mount recov ...
- P1142轰炸
这是uva上的一道模拟题. 首先给出n(n<=700)个点的坐标(坐标在1*10^9)之内,询问走直线可以经过的点数.一开始我想到了一个类似于桶排序的方法来存坐标,但是要注意数组大小啊!第二次想 ...
- Vue进行路由跳转的几种方式
1.<router-link to="需要跳转到页面的路径"> 2.this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回 ...
- RGB颜色值转换成十六进制
function transferRgbToStr(color) { if (typeof color !== 'string' && !(color instanceof Strin ...
- vue-注册全局过滤器
import Vue from 'vue'; import dayjs from 'dayjs'; const filters = { formatDate(date, format = 'YYYY- ...
- WebApi 生成帮助文档及顺便创建简单的测试工具
http://www.2cto.com/kf/201607/522971.html ==========最终的效果图========== ==========下面开始干活========== 一.创建 ...
- 68. Text Justification (JAVA)
Given an array of words and a width maxWidth, format the text such that each line has exactly maxWid ...