参考链接：

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的更多相关文章

  1. 还在为垂直居中苦恼？CSS 布局利器 flexbox 轻轻松松帮你搞定

    传统的 CSS 布局方式是基于盒模型(它是根据盒子与父盒子以及兄弟盒子的关系确定大小和位置的算法),实现时依赖于 block, inline, table, position, float 这些属性, ...

  2. CSS布局（下）

    1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...

  3. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  4. 界面设计技法之css布局

    css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...

  5. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  6. 一览css布局标准

    回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的.1998.5.12,CSS2发正式版.随后发修订版CSS2.1,纠正了CSS2中的一些错误.注意从CSS2起,CS ...

  7. 响应式布局：Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

  8. css布局详解（二）——标准流布局（Nomal flow）

    css标准流布局(Nomal flow) 一.正常流 这是指西方语言中文本从左向右,从上向下显示,这也是我们熟悉的传统的HTML文档中的文本布局.注意,在非西方的语言中,流方向可能不同.大多数元素都在 ...

  9. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

随机推荐

  1. mycat是什么？你是怎么理解的？你们公司分库分表的分片规则是什么？搭建mycat环境常用的配置文件有哪些？

    1.mycat是什么? 国内最活跃的.性能最好的开源数据库分库分表中间件 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务.ACID.可以替代MySQL的加强版数据库 一个可以视为MySQL集 ...

  2. docker面试总结

    1.什么是docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows 机器上,也可以实现虚拟化.容 ...

  3. 大觅网07day

    分布式日志环境的构建(ELK+Kafka) 主要是搭建分布式日志环境,由ELK+Kafka实现,分为以下四步实现: 一.Elasticsearch环境的搭建和测试 1.删除已经存在的ES容器和镜像,如 ...

  4. 使用注解方式搭建SpringMVC

    1.以前搭建Spring MVC 框架一般都使用配置文件的方式进行,相对比较繁琐.spring 提供了使用注解方式搭建Spring MVC 框架的方式,方便简洁.使用Spring IOC 作为根容器管 ...

  5. Python常用方法库备忘（一）_当前路径下文件夹和文件

    #!/usr/bin/env python # -*- coding:utf-8 -*- # --------------*-------------- # @Author : AilF # @Tim ...

  6. Java -cp命令的使用

    服务器跑程序,用到了一些Linux命令,做个简单笔记. Linux(Mac)下 java -cp .:jar包路径 主类的全限定名称     全限定名有绝对路径的意思,比如一个文件file的存放路径, ...

  7. Android API文档

    官方API文档: Android官网: https://developer.android.google.cn/index.html (不需要梯子) Android官网: https://develo ...

  8. 微信小程序里多出来的奇怪宽度

    最近在看微信小程序相关的东西,写页面的时候,因为一直以Iphone6作为标准调试(微信官方建议以Iphone6调试),下面以实际的案例讲解以rpx会引发的问题 wxml: <view class ...

  9. [转载]Jupyter notebook调试

    原文来自:https://blog.csdn.net/dlhlsc/article/details/84309410 jupyter的调试是通过python自带的pdb库来实现的. 下面讲一下在not ...

  10. vs2013在用户控件中添加jquery智能提示

    一.在script文件夹下面添加_references.js文件夹 二.把jquery文件拖到该文件中 保存,重新打开相应的文件,即出现智能提示