参考链接：

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. C++ 多文件编译简述：头文件、链接性、声明与定义

    目录 Commen Sense 头文件 链接性 static 与链接性控制 extern 与外部链接性 Reference Commen Sense C++ 在编译时对每个翻译单元(Translati ...

  2. Hand on Machine Learning 第三章：分类器

    1. 获取数据 使用MNIST数据集练习分类任务 from sklearn.datasets import fetch_mldata from scipy.io import loadmat mnis ...

  3. python 并发编程 多线程 event

    event实现了一个线程通知另外一个线程 线程的一个关键特性是每个线程都是独立运行且状态不可预测. 1.为什么要使用Event对象: 如果程序中的其 他线程需要通过判断某个线程的状态来确定自己下一步的 ...

  4. Connection is read-only. Queries leading to data modification are not allowed 错误原因

    因为我再spring 中使用了AOP进行事务管理,有如下配置 <tx:advice id="txAdvice" transaction-manager="trans ...

  5. [转帖]Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接

    Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接 https://blog.csdn.net/networken/article/details/88938304 转帖 ...

  6. 洛谷 P2467 地精部落 题解

    题面 好难啊好难啊好难啊~(以后再玩魔兽的时候绝对绝对虐死他) 做完后总结了一下思路; 首先推一下以下三条性质: 1.若两个 i 与 i+1 不相邻,那么我们直接交换这两个数字就可以组成一个新的数列 ...

  7. $Prufer$序列

    \(Prufer\)序列 \(Prufer\)序列与树的相互转换: 树->\(Prufer\)序列 找到一个编号最小的叶子结点,把这个点删掉并且把跟他连着的那个点的编号加入\(Prufer\)序 ...

  8. python-day17(正式学习)

    目录 包 一.什么是包? 二.为什么要有包? 三.如何用包? 3.1 模块和包 3.2 扩展模块功能 3.3 修改__init__.py文件 绝对导入和相对导入 注意事项 模块不来总结了,直接去htt ...

  9. MySql 缓冲池(buffer pool) 和 写缓存(change buffer) 转

    应用系统分层架构,为了加速数据访问,会把最常访问的数据,放在缓存(cache)里,避免每次都去访问数据库. 操作系统,会有缓冲池(buffer pool)机制,避免每次访问磁盘,以加速数据的访问. M ...

  10. JavaScript数组知识

    JavaScript数组知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...