参考链接：

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. python__007内置函数

    本文摘自:https://docs.python.org/3/library/functions.html?highlight=built#ascii     内置功能     abs() delat ...

  2. USACO1.6 回文质数 Prime Palindromes

    题目传送门 题目的提示已经非常明显了,可以先生成回文数再判断质数,因为生成回文数的复杂度较小.判断质数用了之前学到的那种做法. 其实可以用一些比较优秀的筛质数的方法,再判断回文数. /* ID: St ...

  3. Keytool生成证书

    一.生成证书keytool -genkey -alias 别名 -keyalg RSA -keysize 1024(密钥位数) -keypass 密码 -validity 365(默认90天) -ke ...

  4. 【VS开发】【智能语音处理】语音信号处理之（四）梅尔频率倒谱系数（MFCC）

    语音信号处理之(四)梅尔频率倒谱系数(MFCC) zouxy09@qq.com http://blog.csdn.net/zouxy09 这学期有<语音信号处理>这门课,快考试了,所以也要 ...

  5. http 协议里的 200、301、302、401、403、405、500 分别代表什么？

    http 协议里的 200.301.302.401.403.405.500 分别代表什么? 详细描述: 打开某些网页时,无法正常打开,出现 200.301.302.401.403.405.500 这此 ...

  6. mysql——查询语句——单表查询——（示例）

    一.基本查询语句 select的基本语法格式如下: select 属性列表 from 表名和视图列表 [ where 条件表达式1 ] [ group by 属性名1 [ having 条件表达式2 ...

  7. 记录一些Xampp的使用过程和遇到的问题

    1.Xmapp需要安装在C盘的Xampp目录,否则很容易出错,一定要在C:/xampp,这样Apache和MySQL才能正常启动,和错误提示的端口冲突或者路径错误无关. 2.Xmapp尽量选择低版本的 ...

  8. AppDomain介绍

    一.建立控制台项目 二.更改Program为ADSetp 三.去掉命名空间AppDomain.CurrentDomain 四.贴代码 using System; using System.IO; us ...

  9. tableau分布式添加节点

    参考: 两节点的安装:https://zhuanlan.zhihu.com/p/44732932https://help.tableau.com/current/server-linux/zh-cn/ ...

  10. Ubuntu下软件打开时状态图标与原始图标不重合问题解决

    问题描述 如下图书所示,pycharm打开时,运行的pycharm图标与原始的在收藏夹中的图标不重合.而其他软件不会这样,运行软件的图标与原始图标会重合, 解决办法 把鼠标悬浮在打开的pycharm上 ...