参考链接：

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. cocos2dx[3.2](3) 浅析CCDeprecated.h

    CCDeprecated.h中存放的都是2.x将要被抛弃的命名规范,主要包含类名.枚举类型. 虽然说2.x的这些命名规范被CCDeprecated.h保留了.但是为了彻底学习3.x的新特性,就必须要尽 ...

  2. 奥比中光Astra Pro在ROS系统中的使用

    奥比中光Astra Pro在ROS系统中的使用 上一次介绍了Astra Pro在ubuntu中的使用,由于Astra Pro使用uvc传输彩色图像,所以当用rqt_image_view窗口 时,看不到 ...

  3. CountDownLatch与CyclicBarrier的对比

    CountDownLatch: CountDownLatch通过计数器来实现,计数器表示线程的数量.每当一个线程执行结束后,计数器的值就会减1,并在await方法处阻塞.一旦计数器为0,所有阻塞的线程 ...

  4. springMvc中获取通过注解获取properties配置文件（转）

    springMvc的项目中,通过注解@Value获取properties配置文件中的配置,使用该注解必须引入的包: spring-beans-4.1.4.RELEASE.jar 下面是需要在sprin ...

  5. 几张图让你看懂WebAssembly

    几张图让你看懂WebAssembly:https://www.jianshu.com/p/bff8aa23fe4d

  6. 什么是SQL注入以及mybatis中#{}为什么能防止SQL注入而${}为什么不能防止SQL注入

    1.什么是SQL注入 答:SQL注入是通过把SQL命令插入到web表单提交或通过页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL指令. 注入攻击的本质是把用户输入的数据当做代码执行. 举例如: ...

  7. [LeetCode]220. 存在重复元素 III

    题目链接:https://leetcode-cn.com/problems/contains-duplicate-iii/ 题目描述: 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使 ...

  8. [.net core]7 4种app key value的配置方法及优先顺序

    就是这货 点开查看内容 { "Logging": { "LogLevel": { "Default": "Warning" ...

  9. 3种Redis分布式锁的对比

    我们通常使用的synchronized或者Lock都是线程锁,对同一个JVM进程内的多个线程有效.因为锁的本质 是内存中存放一个标记,记录获取锁的线程是谁,这个标记对每个线程都可见.然而我们启动的多个 ...

  10. myql命令行乱码问题，以及设置数据库编码

    使用命令修改数据库编码格式参见:https://www.cnblogs.com/clsn/p/8047028.html#auto_id_3 命令行乱码设置修改参见:https://www.cnblog ...